Grafana design system

@grafana/ui is currently in BETA.

With the design system @grafana/ui, we want to democratize development. This library of reusable Grafana components and guidelines helps you with contribution and plugin development.

Our vision

Grafana Labs started @grafana/ui to make contributing to Grafana as easy as possible for Grafanistas and community members of all fields. We want to create a component library that results in:

Understanding of how each component works and how you can use it to create a great user experience.
Short development times and consistent code quality.
A beautiful, visually consistent Grafana experience.
Transparency about how we work and what we do.

Maintained by Grafana Labs and you

Grafana Labs has a task force that helps create and maintain components. We make sure that components are documented and easy to use. The current status of the @grafana/ui development is available on GitHub. Feel free to contribute!

How to get involved

When we notice that we need to change something, we determine together what the change should be, then we put the change in place and communicate it publicly. Developers and designers create and improve @grafana/ui together. Throughout the process, we strive to involve you and meet your needs. We are looking forward to discussing your design and improvement ideas on GitHub.

Get started

Explore UI components Click on any of the component in the sidebar to see how they look, and how to configure them. Each component pages contains documentation of its properties, as well as code examples for how to use it.
Try them out
- Experiment with different properties, by clicking Canvas at the top of each component page.
- Change the properties under Knobs in the bottom panel.
Use them Once you've found the right component for your use case, click the Story tab to see the code implementation, or look at examples under Docs.
For more details, refer to the package source.

Installation

yarn add @grafana/ui

npm install @grafana/ui