Garden React Components

🌱 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.

Installation

See the individual package README for the React component you would like to install.

Package	Version	Size
`@zendeskgarden/react-accordions`
`@zendeskgarden/react-avatars`
`@zendeskgarden/react-breadcrumbs`
`@zendeskgarden/react-buttons`
`@zendeskgarden/react-chrome`
`@zendeskgarden/react-colorpickers`
`@zendeskgarden/react-datepickers`
`@zendeskgarden/react-drag-drop`
`@zendeskgarden/react-dropdowns`
`@zendeskgarden/react-dropdowns.next`
`@zendeskgarden/react-forms`
`@zendeskgarden/react-grid`
`@zendeskgarden/react-loaders`
`@zendeskgarden/react-modals`
`@zendeskgarden/react-notifications`
`@zendeskgarden/react-pagination`
`@zendeskgarden/react-tabs`
`@zendeskgarden/react-tables`
`@zendeskgarden/react-tags`
`@zendeskgarden/react-theming`
`@zendeskgarden/react-tooltips`
`@zendeskgarden/react-typography`

Usage

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'));