🌱 garden React components
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: add version prompt to ISSUE_TEMPLATE (#270) Feb 15, 2019
demo feat(ranges): introduce MultiThumbRange component (#254) Jan 23, 2019
examples/nextjs feat: update SVG icons (#238) Dec 19, 2018
packages chore(release): publish Feb 13, 2019
utils feat(loaders): introduce Skeleton loader (#261) Feb 13, 2019
.editorconfig chore: initialize repo (#1) May 7, 2018
.eslintrc.json feat(ranges): introduce MultiThumbRange component (#254) Jan 23, 2019
.gitignore chore: initialize repo (#1) May 7, 2018
.huskyrc chore(build): update pre-commit hook to use lint-staged (#245) Jan 9, 2019
.lintstagedrc feat(loaders): introduce Skeleton loader (#261) Feb 13, 2019
.markdownlintrc feat: prepare for @zendeskgarden npm publish (#4) May 9, 2018
.nvmrc chore: initialize repo (#1) May 7, 2018
.prettierrc chore: initialize repo (#1) May 7, 2018
.stylelintrc feat(loaders): introduce Skeleton loader (#261) Feb 13, 2019
.travis.yml chore(build): force latest stable of yarn in ci to fix Buffer warnings ( Jan 10, 2019
LICENSE.md chore: initialize repo (#1) May 7, 2018
README.md chore(deps): update all development non-major dependencies (#241) Jan 10, 2019
babel.config.js feat: migrate from babel-inline-svg to @svgr/webpack (#221) Dec 5, 2018
lerna.json fix(publish): default lerna publish registry to NPM (#158) Sep 17, 2018
package.json feat(loaders): introduce Skeleton loader (#261) Feb 13, 2019
renovate.json chore(deps): update all development non-major dependencies (#241) Jan 10, 2019
yarn.lock chore(deps): update all development non-major dependencies (#250) Feb 11, 2019

README.md

Garden React Components Build Status Dependency Status Coverage Status

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

Package Version Dependencies
@zendeskgarden/react-autocomplete npm version Dependency Status
@zendeskgarden/react-avatars npm version Dependency Status
@zendeskgarden/react-breadcrumbs npm version Dependency Status
@zendeskgarden/react-buttons npm version Dependency Status
@zendeskgarden/react-checkboxes npm version Dependency Status
@zendeskgarden/react-chrome npm version Dependency Status
@zendeskgarden/react-grid npm version Dependency Status
@zendeskgarden/react-loaders npm version Dependency Status
@zendeskgarden/react-menus npm version Dependency Status
@zendeskgarden/react-modals npm version Dependency Status
@zendeskgarden/react-notifications npm version Dependency Status
@zendeskgarden/react-pagination npm version Dependency Status
@zendeskgarden/react-radios npm version Dependency Status
@zendeskgarden/react-ranges npm version Dependency Status
@zendeskgarden/react-select npm version Dependency Status
@zendeskgarden/react-selection npm version Dependency Status
@zendeskgarden/react-tabs npm version Dependency Status
@zendeskgarden/react-tables npm version Dependency Status
@zendeskgarden/react-tags npm version Dependency Status
@zendeskgarden/react-testing npm version Dependency Status
@zendeskgarden/react-textfields npm version Dependency Status
@zendeskgarden/react-theming npm version Dependency Status
@zendeskgarden/react-toggles npm version Dependency Status
@zendeskgarden/react-tooltips npm version Dependency Status
@zendeskgarden/react-typography npm version Dependency Status
@zendeskgarden/react-utilities npm version Dependency 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