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.
For API docs and usage examples, visit the Mirotone React documentation page.
Install the package as a dependency on your own project by running:
npm install mirotone-reactyarn add mirotone-reactpnpm add mirotone-reactAll components and types are exported from the main package. You can import them as follows:
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<HTMLButtonElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
const buttonClickHandler = useCallback(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return (
<>
<Input
{...inputProps}
ref={inputRef}
value={value}
onChange={setValue}
style={{ color: tokens.color.red[800] }}
/>
<Button
{...buttonProps}
ref={buttonRef}
style={{ borderRadius: tokens.borderRadius.small }}
onClick={buttonClickHandler}
>
Click to focus input
</Button>
</>
);
}
export default App;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:
import { tokens } from 'mirotone-react';| Token | Path | Documentation |
|---|---|---|
| Color | tokens.color |
Color docs |
| Typography | tokens.typography |
Typography docs |
| Spacing | tokens.space |
Spacing docs |
| Border radius | tokens.borderRadius |
Border radius docs |
| Feature | Status | Reference |
|---|---|---|
| Dismissable badge | Beta | Docs |
| Dropdown | Beta | Docs |
| Tooltip | Beta | Docs |
| 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 |
Mirotone React is distributed under MIT license, Copyright (c) 2024 Andrew Vo-Nguyen. See LICENSE for more information.