Mirotone React

Mirotone React is a component library for the Mirotone Design System, offering a range of components and utilities to speed up development for Miro. It draws inspiration from Mirotone CSS and Miro UI Components.

• NPM package
• GitHub repository
• Documentation
• Mirotone CSS
• Miro UI components

• React
• Mirotone CSS
• Storybook
• Radix UI
• Vite
• TypeScript

Mirotone React comes with all the basic building blocks to build out a beautiful user interface. It includes all the essentials such as buttons, headings, paragraphs, grids, icons, spinners, form inputs and so much more.

Here is a basic example of how the components can be used:

Mirotone React offers a 1 to 1 mapping of all the icons available on Mirotone. To select an icon, simply use the <Icon /> React component and send it through the name prop. which gives you access to over 150 icon tokens.

All icon tokens can be found in the docs. Here is a basic example of how to use an icon with Mirotone React:

Mirotone React promotes consistency in UI. To do so, it provides a fully typed tokens object that gives you access to font sizes and weights, Miro's color palette, spacing and border-radius values.

Here is a basic example of how to import tokens in your app:

The object contains the following options:

tokens.color - Color docs

tokens.typography - Typography docs

tokens.space - Spacing docs

tokens.borderRadius - Border radius docs

Mirotone React is designed for the user to compose their UI how they want. This flexibility allows the user to use Mirotone React similarly to Lego blocks. The Recipes section on the docs demonstrates how many small components can be glued together to make a composed component.

Here is an example of how an app card is composed:

Mirotone React exposes standard HTML DOM props for all of its components. This includes the className and ref props so that third-party styling solutions can modify Mirotone React components. Here are some examples of how third-party styling solutions can be applied: