Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/zendeskgarden/website/llms.txt

Use this file to discover all available pages before exploring further.

Garden is Zendesk’s design system — a collection of React components, design foundations, and usage patterns that help teams build consistent, accessible, and beautiful product experiences.

Design Foundations

Explore color systems, typography, icons, and the principles behind Garden’s visual language.

React Components

60+ production-ready, accessible React components with TypeScript support and full theming.

Usage Patterns

Guidance on common UI workflows — buttons, forms, tables, loaders, drag-and-drop, and more.

Theming

Customize Garden with your own brand colors, typography, and component overrides.

​
Get started

1

Install a Garden package

Install the packages you need from npm. All Garden React packages live under the @zendeskgarden scope.
npm install @zendeskgarden/react-theming @zendeskgarden/react-buttons styled-components
2

Wrap your app with ThemeProvider

Garden components require the ThemeProvider at the root of your application to supply theming context.
import { ThemeProvider, DEFAULT_THEME } from '@zendeskgarden/react-theming';

function App() {
  return (
    <ThemeProvider theme={DEFAULT_THEME}>
      {/* your app */}
    </ThemeProvider>
  );
}
3

Use a component

Import and use any Garden component. All components are fully typed and accessible out of the box.
import { Button } from '@zendeskgarden/react-buttons';

function MyComponent() {
  return <Button isPrimary>Get started</Button>;
}
4

Customize the theme

Override Garden’s default theme with your own brand values.
import { ThemeProvider, DEFAULT_THEME } from '@zendeskgarden/react-theming';

const theme = {
  ...DEFAULT_THEME,
  colors: {
    ...DEFAULT_THEME.colors,
    primaryHue: 'crimson',
  },
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* your app */}
    </ThemeProvider>
  );
}

​
Key features

Accessible by default

All components follow WCAG guidelines, with keyboard navigation, ARIA attributes, and screen reader support built in.

TypeScript support

Full TypeScript definitions across all packages, with prop types extracted directly from source.

Light & dark mode

Automatic light and dark theme support with semantic color variables that adapt to the active color scheme.

RTL support

All components support right-to-left languages. Toggle RTL layout via the ThemeProvider.

Design tokens

Semantic color variables and design tokens keep your UI consistent and easy to maintain.

Figma integration

Garden’s components map 1:1 to Figma assets, making design-to-code handoff seamless.
Looking for a specific component? Head to the Components tab for the full library, organized by category.