Garden React Components

🌱 Garden is a design system for Zendesk

Garden React provides consistent 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. Components rely on Garden CSS for styling.

Installation

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

PackageVersionDependencies
@zendeskgarden/react-autocompletenpm versionDependency Status
@zendeskgarden/react-avatarsnpm versionDependency Status
@zendeskgarden/react-breadcrumbsnpm versionDependency Status
@zendeskgarden/react-buttonsnpm versionDependency Status
@zendeskgarden/react-chromenpm versionDependency Status
@zendeskgarden/react-dropdownsnpm versionDependency Status
@zendeskgarden/react-formsnpm versionDependency Status
@zendeskgarden/react-gridnpm versionDependency Status
@zendeskgarden/react-loadersnpm versionDependency Status
@zendeskgarden/react-modalsnpm versionDependency Status
@zendeskgarden/react-notificationsnpm versionDependency Status
@zendeskgarden/react-paginationnpm versionDependency Status
@zendeskgarden/react-rangesnpm versionDependency Status
@zendeskgarden/react-selectionnpm versionDependency Status
@zendeskgarden/react-tabsnpm versionDependency Status
@zendeskgarden/react-tablesnpm versionDependency Status
@zendeskgarden/react-tagsnpm versionDependency Status
@zendeskgarden/react-testingnpm versionDependency Status
@zendeskgarden/react-themingnpm versionDependency Status
@zendeskgarden/react-tooltipsnpm versionDependency Status
@zendeskgarden/react-typographynpm versionDependency Status
@zendeskgarden/react-utilitiesnpm versionDependency Status

Usage

Our packages are easily consumable with create-react-app and standard webpack configs. All packages follow a similar installation process. Below is an example of consuming our react-buttons package.

Install dependencies

# Install garden package
npm install @zendeskgarden/react-buttons

# Install peer dependencies
npm install styled-components @zendeskgarden/react-theming

Include global styling and ThemeProvider

import React, { Component } from 'react';
import { render } from 'react-dom';

/** Globally include scoped button styling */
import '@zendeskgarden/react-buttons/dist/styles.css';

/** Include a ThemeProvider at the root of your app */
import { ThemeProvider } from '@zendeskgarden/react-theming';

/** Consume throughout app */
import { Button } from '@zendeskgarden/react-buttons';

class App extends Component {
  render() {
    return (
      <ThemeProvider>
        <Button>Example Garden Button</Button>
      </ThemeProvider>
    );
  }
}

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

Try out Garden React components in a mock product environment.

Edit Garden Create-React-App

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

Licensed under the Apache License, Version 2.0