<Meta title="Docs Overview/Intro" parameters={{ options: { isToolshown: false }, id: 1 }} />

# Grafana UI library

> **@grafana/ui is currently in BETA**.

@grafana/ui is a collection of components used by [Grafana](https://github.com/grafana/grafana)

If you're a plugin developer, you can use these component to give your plugin an official look-and-feel.

## 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](https://github.com/grafana/grafana/tree/master/packages/grafana-ui).

## Installation

`yarn add @grafana/ui`

`npm install @grafana/ui`

## Related links

- [Build a panel plugin tutorial](https://grafana.com/tutorials/build-a-panel-plugin/#0)
- [Plugin Developer guide](https://grafana.com/docs/grafana/latest/plugins/developing/development/)
- [Boilerplate Panel Plugin](https://github.com/grafana/simple-react-panel)
- [Grafana Tutorials](https://grafana.com/tutorials/)
