Mirotone-react NPM

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.

Documentation

For API docs and usage examples, visit the Mirotone React documentation page.

Installation

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

npm install mirotone-react

yarn add mirotone-react

pnpm add mirotone-react

Usage

All 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;

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:

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