# Mirotone

![image](https://user-images.githubusercontent.com/13353203/153415890-7004da29-3700-45aa-8a69-a60f12dbcf6e.png)

![NPM Downloads](https://img.shields.io/npm/dt/mirotone.svg)
![NPM Version](https://img.shields.io/npm/v/mirotone.svg)

Mirotone is a small & lightweight skeleton UI Kit that matches Miro styles for building apps and plugins. The package contains a CSS file which can be used for any project.

## Content

- [Getting started](#getting-started)
- [Browser support](#browser-support)
- [Components](#components)

### Getting started

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

```
npm install mirotone
// or with yarn
yarn add mirotone
```

For using something like [PostCSS import](https://github.com/postcss/postcss-import) you can do the following:

```css
@import 'mirotone/dist/styles.css';
```

You can also use standard CSS linking to use the styles right away in your project:

```html
<link rel="stylesheet" href="https://unpkg.com/mirotone/dist/styles.css" />
```

## Browser support

Mirotone heavily relies on [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). This means that it is not supported in IE11 and below. All other modern browsers are supported.

### Components

- variables
- typography
- icons
- buttons
- checkbox
- toggle
- radiobutton
- link
- textarea
- input
- select
- tabs
- divider
- app layouts
- app card
- table

You can check the [documentation](https://mirotone.xyz/) for more details.

---

mirotone © 2022+, Miro