Designing with Zendesk Garden
What is Zendesk Garden?
Zendesk Garden is an open-source design system where Zendesk grows accessible user interface components for all its products.
While it is not required to build an app interface, using Garden will not only help you create a consistent experience, but it will let you take advantage of the large collection of pre-built components, speeding up development to allow you to get your app to customers or in production faster.
Benefits of using Zendesk Garden
A strong focus on accessibility, meeting WCAG guidelines
Pre-built components allow you to create an interface quick and easily
Continuous improvements made and published by the dedicated Garden development team
Create consistency with Zendesk products by using the same components we use to build our products
Design with Garden
To make it as easy as possible to design with Garden, a Figma library is available with all of the components and their variations pre-built you can use in your designs. These are synchronised with what’s available technically, so you can design with confidence.
See Garden in action
To see what the Garden system looks like in action, install the demo app. This app provides an example of the various components that you can interact with.
Install Garden in your app
A complete list of assets you can import into your app is available from the jsDelivr CDN. See jsDelivr - A free, fast, and reliable CDN for Open Source. The jsDelivr files are npm packages that can also be installed from npm. See zendeskgarden - npm search.
Learn about Zendesk’s tone and voice to help with your apps content design
Explore the Garden website to see all of the components available.