Introduction

Mirotone CSS components is the base library which enables everyone to design and build their Miro apps. The goal of this design system is to enable makers to quickly jump into a simple, yet consistent and efficient user experience while creating their functional solutions. The framework aims to provide ready-to-use frontend components that you can incorporate into your app in Miro.

Getting started

Mirotone is a CSS library, which means you can use the classes to style your HTML elements. To use it you can either:

Install the package as a dependency on your own project by running:

yarn add mirotone

or

npm install mirotone

Or link the css directly by standard css linking

<link rel="stylesheet" href="https://unpkg.com/mirotone@^5/dist/styles.css">

How does it work

Mirotone is inspired from the BEM architecture, Object Oriented CSS principles and functional CSS. You define the main class and you use a another class as a modifier to add the customization.

Example:

<button class="button button-primary">Primary button</button>

Browser support

All browsers that are supported by Miro itself are supported by Mirotone.