Garden React Components

:seedling: Garden is the design system by Zendesk

Garden React provides consistent styling and behavior for Garden components. Version 10 ships every component in one package, @zendeskgarden/react-components.

Release candidate: v10 is in development and the API can still change before 10.0.0. Looking for v9? The @zendeskgarden/react-* packages are still the stable release. See the v9 source. Upgrading to v10? Read the migration guide.

Installation

npm install @zendeskgarden/react-components@next styled-components

The package has these peer dependencies:

• react and react-dom: ^16.13.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
• styled-components: ^6.0.8

Usage

Here is a simple example to get you started:

import { Button, ThemeProvider } from '@zendeskgarden/react-components';
import React from 'react';
import { createRoot } from 'react-dom/client';

const App = () => (
  /* Include a ThemeProvider wrapper at the root of your app */
  <ThemeProvider>
    <Button>Example Garden button</Button>
  </ThemeProvider>
);

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

React 16 and 17 do not include createRoot. Use ReactDOM.render instead.

Documentation

See Garden's documentation website or click the links below to learn more.

• Versioning policy
• Major release migration instructions (v9 to v10)
• Component API
• Development guidelines
• Architectural decision records

Contribution

Thanks for your interest in Garden! Community involvement helps make our design system fresh and tasty for everyone.

Got issues with what you find here? Please feel free to create an issue.

If you'd like to take a crack at making some changes, please follow our contributing documentation for details needed to submit a PR.

Community behavior is benevolently ruled by a code of conduct. Please participate accordingly.

License

Copyright 2026 Zendesk

Licensed under the Apache License, Version 2.0