https://github.com/andrewvo89/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.
https://github.com/andrewvo89/mirotone-react
component design library miro mirotone react system ui
Last synced: 11 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/andrewvo89/mirotone-react
- Owner: andrewvo89
- License: mit
- Created: 2024-02-23T02:37:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-04T23:45:52.000Z (17 days ago)
- Last Synced: 2025-04-05T00:28:13.181Z (17 days ago)
- Topics: component, design, library, miro, mirotone, react, system, ui
- Language: TypeScript
- Homepage: https://andrewvo89.github.io/mirotone-react/
- Size: 14.9 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/andrewvo89/mirotone-react)
[](https://www.npmjs.com/package/mirotone-react)
[](https://github.com/andrewvo89/mirotone-react/blob/fb1297c03d5b42bb497139f56fc1ffd7d7030dc7/package.json#L16)
[](https://github.com/andrewvo89/mirotone-react/issues)
[](https://github.com/andrewvo89/mirotone-react/pulls)
[](/LICENSE)
# 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](https://www.mirotone.xyz/) and [Miro UI Components](https://www.figma.com/community/file/1125698230201231315/mirotone-ui-components).
## Documentation
For API docs and usage examples, visit the [Mirotone React](https://andrewvo89.github.io/mirotone-react) documentation page.
## Table of contents
- [Links](#links)
- [Installation](#installation)
- [Usage](#usage)
- [Tokens](#tokens)
- [Roadmap](#roadmap)
- [Versions](#versions)
- [License](#license)
## Links
- [NPM package](https://www.npmjs.com/package/mirotone-react)
- [GitHub repository](https://github.com/andrewvo89/mirotone-react)
- [Documentation](https://andrewvo89.github.io/mirotone-react)
- [Mirotone CSS](https://www.mirotone.xyz/)
- [Miro UI components](https://www.figma.com/community/file/1125698230201231315/mirotone-ui-components)
## Installation
Install the package as a dependency on your own project by running:
```bash
npm install mirotone-react
```
```bash
yarn add mirotone-react
```
```bash
pnpm add mirotone-react
```
## Usage
All components and types are exported from the main package. You can import them as follows:
```tsx
import { Button, ButtonProps, Input, InputProps, tokens } from 'mirotone-react';
import { useCallback, useRef, useState } from 'react';
const buttonProps: ButtonProps = {
size: 'large',
variant: 'danger',
};
const inputProps: InputProps = {
size: 'small',
};
function App() {
const [value, setValue] = useState('');
const buttonRef = useRef(null);
const inputRef = useRef(null);
const buttonClickHandler = useCallback(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return (
<>
Click to focus input
>
);
}
export default App;
```
## Tokens
Mirotone React provides a type safe way to access the tokens from Mirotone CSS.
Tokens include color, typography, space, borderRadius.
All tokens are exported from the main package. You can import them as follows:
```tsx
import { tokens } from 'mirotone-react';
```
| Token | Path | Documentation |
| ------------- | --------------------- | -------------------------------------------------------------------------------------------------------- |
| Color | `tokens.color` | [Color docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/tokens-colors--docs) |
| Typography | `tokens.typography` | [Typography docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/tokens-typography--docs) |
| Spacing | `tokens.space` | [Spacing docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/tokens-spacing--docs) |
| Border radius | `tokens.borderRadius` | [Border radius docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/tokens-border-radius--docs) |
## Roadmap
| Feature | Status | Reference |
| ----------------- | ------ | -------------------------------------------------------------------------------------------- |
| Dismissable badge | Beta | [Docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/beta-dismissable-badge--docs) |
| Dropdown | Beta | [Docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/beta-dropdown--docs) |
| Tooltip | Beta | [Docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/beta-tooltip--docs) |
## Versions
| Mirotone React | Mirotone CSS | Mirotone UI Components |
| -------------- | ------------ | ---------------------- |
| 1.x.x | 5.1.1 | 1.4.0 |
| 2.x.x | 5.3.0 | 1.4.0 |
## License
Mirotone React is distributed under MIT license, Copyright (c) 2024 Andrew Vo-Nguyen. See [LICENSE](/LICENSE) for more information.