{"id":20315973,"url":"https://github.com/andrewvo89/mirotone-react","last_synced_at":"2025-04-11T17:35:39.999Z","repository":{"id":226346992,"uuid":"762066774","full_name":"andrewvo89/mirotone-react","owner":"andrewvo89","description":"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.","archived":false,"fork":false,"pushed_at":"2025-04-04T23:45:52.000Z","size":15575,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T00:28:13.181Z","etag":null,"topics":["component","design","library","miro","mirotone","react","system","ui"],"latest_commit_sha":null,"homepage":"https://andrewvo89.github.io/mirotone-react/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andrewvo89.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-23T02:37:53.000Z","updated_at":"2025-04-04T23:45:50.000Z","dependencies_parsed_at":"2024-04-22T05:22:58.505Z","dependency_job_id":"7973cb82-8876-4218-9c00-e8a496b191c5","html_url":"https://github.com/andrewvo89/mirotone-react","commit_stats":null,"previous_names":["andrewvo89/mirotone-react"],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewvo89%2Fmirotone-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewvo89%2Fmirotone-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewvo89%2Fmirotone-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrewvo89%2Fmirotone-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrewvo89","download_url":"https://codeload.github.com/andrewvo89/mirotone-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248450447,"owners_count":21105681,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","design","library","miro","mirotone","react","system","ui"],"created_at":"2024-11-14T18:23:28.827Z","updated_at":"2025-04-11T17:35:39.976Z","avatar_url":"https://github.com/andrewvo89.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://nextjs.org\"\u003e\n      \u003cimg src=\"https://andrewvo89.github.io/mirotone-react/mirotone-logo.png\" height=\"128px\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Status](https://img.shields.io/badge/status-active-blue)](https://github.com/andrewvo89/mirotone-react)\n[![NPM Version](https://img.shields.io/npm/v/mirotone-react)](https://www.npmjs.com/package/mirotone-react)\n[![Coverage](https://img.shields.io/badge/coverage-100%25-blue)](https://github.com/andrewvo89/mirotone-react/blob/fb1297c03d5b42bb497139f56fc1ffd7d7030dc7/package.json#L16)\n[![GitHub Issues](https://img.shields.io/github/issues/andrewvo89/mirotone-react?color=blue)](https://github.com/andrewvo89/mirotone-react/issues)\n[![GitHub Pull Requests](https://img.shields.io/github/issues-pr/andrewvo89/mirotone-react?color=blue)](https://github.com/andrewvo89/mirotone-react/pulls)\n[![License](https://img.shields.io/github/license/andrewvo89/mirotone-react?color=blue)](/LICENSE)\n\n\u003c/div\u003e\n\u003cbr/\u003e\n\n# Mirotone React\n\nMirotone 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).\n\n## Documentation\n\nFor API docs and usage examples, visit the [Mirotone React](https://andrewvo89.github.io/mirotone-react) documentation page.\n\n## Table of contents\n\n- [Links](#links)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Tokens](#tokens)\n- [Roadmap](#roadmap)\n- [Versions](#versions)\n- [License](#license)\n\n## Links\n\n- [NPM package](https://www.npmjs.com/package/mirotone-react)\n- [GitHub repository](https://github.com/andrewvo89/mirotone-react)\n- [Documentation](https://andrewvo89.github.io/mirotone-react)\n- [Mirotone CSS](https://www.mirotone.xyz/)\n- [Miro UI components](https://www.figma.com/community/file/1125698230201231315/mirotone-ui-components)\n\n## Installation\n\nInstall the package as a dependency on your own project by running:\n\n```bash\nnpm install mirotone-react\n```\n\n```bash\nyarn add mirotone-react\n```\n\n```bash\npnpm add mirotone-react\n```\n\n## Usage\n\nAll components and types are exported from the main package. You can import them as follows:\n\n```tsx\nimport { Button, ButtonProps, Input, InputProps, tokens } from 'mirotone-react';\nimport { useCallback, useRef, useState } from 'react';\n\nconst buttonProps: ButtonProps = {\n  size: 'large',\n  variant: 'danger',\n};\n\nconst inputProps: InputProps = {\n  size: 'small',\n};\n\nfunction App() {\n  const [value, setValue] = useState('');\n  const buttonRef = useRef\u003cHTMLButtonElement\u003e(null);\n  const inputRef = useRef\u003cHTMLInputElement\u003e(null);\n\n  const buttonClickHandler = useCallback(() =\u003e {\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, []);\n\n  return (\n    \u003c\u003e\n      \u003cInput\n        {...inputProps}\n        ref={inputRef}\n        value={value}\n        onChange={setValue}\n        style={{ color: tokens.color.red[800] }}\n      /\u003e\n      \u003cButton\n        {...buttonProps}\n        ref={buttonRef}\n        style={{ borderRadius: tokens.borderRadius.small }}\n        onClick={buttonClickHandler}\n      \u003e\n        Click to focus input\n      \u003c/Button\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default App;\n```\n\n## Tokens\n\nMirotone React provides a type safe way to access the tokens from Mirotone CSS.\nTokens include color, typography, space, borderRadius.\nAll tokens are exported from the main package. You can import them as follows:\n\n```tsx\nimport { tokens } from 'mirotone-react';\n```\n\n| Token         | Path                  | Documentation                                                                                            |\n| ------------- | --------------------- | -------------------------------------------------------------------------------------------------------- |\n| Color         | `tokens.color`        | [Color docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/tokens-colors--docs)                |\n| Typography    | `tokens.typography`   | [Typography docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/tokens-typography--docs)       |\n| Spacing       | `tokens.space`        | [Spacing docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/tokens-spacing--docs)             |\n| Border radius | `tokens.borderRadius` | [Border radius docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/tokens-border-radius--docs) |\n\n## Roadmap\n\n| Feature           | Status | Reference                                                                                    |\n| ----------------- | ------ | -------------------------------------------------------------------------------------------- |\n| Dismissable badge | Beta   | [Docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/beta-dismissable-badge--docs) |\n| Dropdown          | Beta   | [Docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/beta-dropdown--docs)          |\n| Tooltip           | Beta   | [Docs](https://andrewvo89.github.io/mirotone-react/?path=/docs/beta-tooltip--docs)           |\n\n## Versions\n\n| Mirotone React | Mirotone CSS | Mirotone UI Components |\n| -------------- | ------------ | ---------------------- |\n| 1.x.x          | 5.1.1        | 1.4.0                  |\n| 2.x.x          | 5.3.0        | 1.4.0                  |\n\n## License\n\nMirotone React is distributed under MIT license, Copyright (c) 2024 Andrew Vo-Nguyen. See [LICENSE](/LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewvo89%2Fmirotone-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewvo89%2Fmirotone-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewvo89%2Fmirotone-react/lists"}