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 provides a complete set of React UI components for building Zendesk product interfaces. Every component is built with accessibility, right-to-left (RTL) layout, and theming as first-class concerns.

​
Key features

  • TypeScript — all packages ship with full type definitions
  • Accessibility — components implement ARIA patterns and keyboard navigation out of the box
  • Theming — a single ThemeProvider controls colors, spacing, typography, and border radii across your entire application
  • RTL support — set rtl: true on the theme object to flip layout direction for right-to-left languages
  • Styled Components — components use styled-components v5 under the hood, making custom overrides straightforward

​
Installation

Every Garden component package lives under the @zendeskgarden scope. To get started, install the theming package and its peer dependency: 
npm install @zendeskgarden/react-theming styled-components
Then install whichever component packages you need, for example: 
npm install @zendeskgarden/react-buttons @zendeskgarden/react-dropdowns
Wrap your application with ThemeProvider to activate Garden styling: 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Button } from '@zendeskgarden/react-buttons';

function App() {
  return (
    <ThemeProvider>
      <Button isPrimary>Get started</Button>
    </ThemeProvider>
  );
}

​
Foundations

Garden components layer on top of two lower-level packages that you can use independently.
Bedrock CSS (@zendeskgarden/css-bedrock) provides a minimal CSS reset that normalises browser defaults without overriding application styles. Include it once at the top level of your application. Container utilities (@zendeskgarden/container-utilities) expose headless, framework-agnostic state containers for complex interaction patterns such as selection, focus management, and disclosure. They underpin many Garden components and are useful when you need behaviour without Garden’s visual layer.

​
Component groups

Actions

Button, Icon button, Split button, Toggle button, Anchor, and Menu.

Forms

Input, Checkbox, Radio, Toggle, Combobox, Select, Textarea, Range, and more.

Feedback & Overlays

Modal, Drawer, Tooltip, Notification, Alert, and Global alert.

Layout & Navigation

Grid, Tabs, Pagination, Breadcrumbs, Stepper, and Pane.

Display

Avatar, Tags, Table, Loaders, Timeline, Well, and Typography.

Theming

ThemeProvider, ColorSchemeProvider, theme object, and utilities.

Build docs developers (and LLMs) love

Get started for freeTalk to us