Skip to content

zendeskgarden/react-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Garden React Components Build Status Coverage Status

🌱 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 npm version Bundle Size
@zendeskgarden/react-avatars npm version Bundle Size
@zendeskgarden/react-breadcrumbs npm version Bundle Size
@zendeskgarden/react-buttons npm version Bundle Size
@zendeskgarden/react-chrome npm version Bundle Size
@zendeskgarden/react-colorpickers npm version Bundle Size
@zendeskgarden/react-datepickers npm version Bundle Size
@zendeskgarden/react-draggable npm version Bundle Size
@zendeskgarden/react-dropdowns.legacy npm version Bundle Size
@zendeskgarden/react-dropdowns npm version Bundle Size
@zendeskgarden/react-forms npm version Bundle Size
@zendeskgarden/react-grid npm version Bundle Size
@zendeskgarden/react-loaders npm version Bundle Size
@zendeskgarden/react-modals npm version Bundle Size
@zendeskgarden/react-notifications npm version Bundle Size
@zendeskgarden/react-pagination npm version Bundle Size
@zendeskgarden/react-tabs npm version Bundle Size
@zendeskgarden/react-tables npm version Bundle Size
@zendeskgarden/react-tags npm version Bundle Size
@zendeskgarden/react-theming npm version Bundle Size
@zendeskgarden/react-tooltips npm version Bundle Size
@zendeskgarden/react-typography npm version Bundle Size

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

Check out more Garden React components in this sandbox IDE:

Edit Garden CodeSandbox

Documentation

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

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 2021 Zendesk

Licensed under the Apache License, Version 2.0