🌱 Garden is the design system by Zendesk
Garden React provides consistent styling and behavior for Garden components. React components are maintained following a multi-package approach where components are packaged and published individually, but combined under this single repository.
See the individual package README for the React component you would like to install.
Garden React packages are ready to use in a Create React App environment or together with standard Rollup or webpack build configurations.
Here is a simple example to get you started:
import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Button } from '@zendeskgarden/react-buttons';
const App = () => (
/* Include a ThemeProvider wrapper at the root of your app */
<ThemeProvider>
<Button>Example Garden button</Button>
</ThemeProvider>
);
ReactDOM.render(<App />, document.getElementById('root'));Check out more Garden React components in this sandbox IDE:
See Garden's documentation website or click the links below to learn more.
- Versioning policy
- Major release migration instructions
- Component API
- Development guidelines
- Architectural decision records
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.
Copyright 2025 Zendesk
Licensed under the Apache License, Version 2.0