Skip to main content
Garden React components are published as individual packages under the @zendeskgarden npm scope. Every package can be installed independently so you only pull in what you use.
v10 update: Garden v10 introduces a single unified @zendeskgarden/react-components package as an alternative to installing individual packages. Both approaches are supported — use whichever fits your project.

​
Prerequisites

Before installing Garden components, make sure your project meets these requirements:
  • React ^16.8.0, ^17.0.0, ^18.0.0, or ^19.0.0
  • react-dom matching your React version
  • styled-components ^6.0.0
All Garden component packages declare react, react-dom, and styled-components as peer dependencies. You need to have them installed in your project.

​
Install peer dependencies

If you haven’t already, install the required peer dependencies: 
npm install react react-dom styled-components

​
Install Garden packages

1

Install the theming package

Every Garden component depends on @zendeskgarden/react-theming. Install it first:
npm install @zendeskgarden/react-theming
2

Install component packages

Install the component packages you need. For example, to use buttons:
npm install @zendeskgarden/react-buttons
Each package follows the same pattern: @zendeskgarden/react-<name>. See the full package list below.
3

Wrap your app in ThemeProvider

Place a single ThemeProvider at the root of your application. All Garden components must be rendered inside a ThemeProvider.
import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Button } from '@zendeskgarden/react-buttons';

const App = () => (
  <ThemeProvider>
    <Button>Example Garden button</Button>
  </ThemeProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));
ThemeProvider can also be nested for scoped theming — for example, wrapping a subsection of your app in a separate ThemeProvider with a different accent color.

​
v10: unified package

Starting with v10, you can install the single @zendeskgarden/react-components package instead of individual packages: 
npm install @zendeskgarden/react-components
The unified package re-exports all components from one entry point: 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Button } from '@zendeskgarden/react-components';

const App = () => (
  <ThemeProvider>
    <Button>Example Garden button</Button>
  </ThemeProvider>
);
The unified @zendeskgarden/react-components package still requires @zendeskgarden/react-theming, react, react-dom, and styled-components as peer dependencies.

​
Minimal working example

Here is a complete minimal app using Garden buttons with the ThemeProvider: 
import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Button } from '@zendeskgarden/react-buttons';

const App = () => (
  <ThemeProvider>
    <>
      <Button onClick={() => alert('clicked')}>Default</Button>
      <Button isPrimary isDanger>
        Primary danger button
      </Button>
    </>
  </ThemeProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

​
Available packages

Garden ships components as independently versioned packages. All packages are distributed under a fixed (common major) version number.
PackageDescription
@zendeskgarden/react-themingThemeProvider, ColorSchemeProvider, DEFAULT_THEME
@zendeskgarden/react-accordionsAccordion, Stepper
@zendeskgarden/react-avatarsAvatar
@zendeskgarden/react-breadcrumbsBreadcrumb
@zendeskgarden/react-buttonsButton, Anchor, IconButton, ToggleButton
@zendeskgarden/react-chromeChrome, Body, Header, Nav, Sheet
@zendeskgarden/react-colorpickersColorpicker, ColorpickerDialog
@zendeskgarden/react-datepickersDatepicker, DatepickerRange
@zendeskgarden/react-draggableDraggable, DraggableList
@zendeskgarden/react-dropdownsCombobox, Multiselect, Select, Menu
@zendeskgarden/react-formsField, Input, Textarea, Checkbox, Radio, Toggle
@zendeskgarden/react-gridGrid, Row, Col
@zendeskgarden/react-loadersDots, Spinner, Skeleton
@zendeskgarden/react-modalsModal, Drawer
@zendeskgarden/react-notificationsAlert, Notification, Well, ToastProvider
@zendeskgarden/react-paginationPagination, CursorPagination
@zendeskgarden/react-tabsTabs, TabList, Tab, TabPanel
@zendeskgarden/react-tablesTable, Head, HeaderRow, HeaderCell, Body, Row, Cell
@zendeskgarden/react-tagsTag
@zendeskgarden/react-tooltipsTooltip
@zendeskgarden/react-typographyParagraph, Span, LG, MD, SM, XL, XXL, XXXL
Keep all @zendeskgarden packages at the same major version. Garden practices fixed (common major) versioning — packages are designed to work together at the same version.

​
Versioning

Garden packages follow semantic versioning:
  • Patch releases contain bug fixes and are deployed on approval.
  • Minor releases contain new features and are deployed weekly.
  • Major releases contain breaking changes and are deployed quarterly.
All releases are recorded in the changelog.

​
Next steps

Theming

Customize colors, fonts, and component styles with ThemeProvider.

Components

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

Build docs developers (and LLMs) love

Get started for freeTalk to us