🌱 Garden is the design system by Zendesk
Garden Containers provide an accessible foundation to start from in your journey to building a11y, keyboard navigable and RTL aware components.
See the individual package README for the React container you would like to install.
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 the container-schedule package.
# Install garden package
npm install @zendeskgarden/container-scheduleimport React from 'react';
import { render } from 'react-dom';
/** Consume throughout app */
import { useSchedule } from '@zendeskgarden/container-schedule';
const App = () => {
const elapsed = useSchedule({ duration: 1000 });
const x = 900;
const styles = {
transform: translateX(`${900 * elapsed}px`)
};
return <div style={styles} />;
};
render(<App />, document.getElementById('root'));import React, { Component } from 'react';
import { render } from 'react-dom';
/** Consume throughout app */
import { ScheduleContainer } from '@zendeskgarden/container-schedule';
class App extends Component {
render() {
return (
<ScheduleContainer>
{elapsed => {
const x = 900;
const styles = {
transform: translateX(`${900 * elapsed}px`)
};
return <div style={styles} />;
}}
</ScheduleContainer>
);
}
}
render(<App />, document.getElementById('root'));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