Skip to main content
Garden React Components is Zendesk’s open-source design system for React. It provides a suite of accessible, consistent, and highly customizable UI components that you can use to build great customer service experiences.

Installation

Get Garden components installed and configured in your React app.

Theming

Customize colors, fonts, and component styles with ThemeProvider.

Components

Browse the full library of 22+ accessible, production-ready components.

Architecture

Understand Garden’s Container-View-Element architecture.

​
Why Garden?

Garden is built around three core principles: Accessibility first — Every component follows WAI-ARIA patterns and supports keyboard navigation, focus management, and screen readers out of the box. Themeable by design — A single ThemeProvider at the root of your app gives you control over colors, spacing, typography, and per-component CSS overrides. Composable and flexible — Components follow a consistent subcomponent pattern (e.g., Modal.Header, Modal.Body) making complex UIs easy to assemble.

​
Quick example

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Button } from '@zendeskgarden/react-buttons';

const App = () => (
  <ThemeProvider>
    <Button isPrimary onClick={() => console.log('clicked')}>
      Get started
    </Button>
  </ThemeProvider>
);

​
Component packages

Garden ships 22+ component packages under the @zendeskgarden npm scope. Every package is independently installable so you only include what you need.

Layout & Structure

Chrome, Grid, Accordions

Forms & Inputs

Forms, Dropdowns, Datepickers, Colorpickers

Overlays & Feedback

Modals, Notifications, Tooltips, Loaders

Navigation & Data

Buttons, Tabs, Tables, Pagination, Breadcrumbs

Display

Avatars, Tags, Typography, Draggable

Theming

ThemeProvider, ColorSchemeProvider, RTL support

​
Guides

Architecture

Learn about the Container-View-Element pattern.

TypeScript

Interface naming, type definitions, and docgen conventions.

Migration

Upgrade to v10 from earlier versions.

Contributing

Guidelines for contributing to Garden.

Build docs developers (and LLMs) love

Get started for freeTalk to us