DocumentationAPI Reference

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.

Zendesk recommends integrating the individual CSS files currently hosted on jsDelivr into your application files and referencing them using relative paths within your application. This helps prevent connectivity issues by hosting your assets on Zendesk's own app CDN and not a third-party CDN.

Disclaimer: Zendesk is not able to provide support for third party package hosting services, such as NPM or JsDelivr. Consider posting the issue to our developer community or searching online.

Further reading

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