# grommet > focus on the essential experience Latest version **2.57.0** (published 2026-09-14) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install grommet pnpm add grommet yarn add grommet bun add grommet ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score. Warnings: low downloads; large bundle. ## Facts | | | |---|---| | Version | 2.57.0 | | Published | 2026-09-14 | | First published | 2015-06-02 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >= 16 | | Dependencies | 4 | | Unpacked size | 10.3 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 8348 | | Maintainers | halocline, jcfilben, brittmarie94, mikekingdomhpe | | Keywords | grommet, grommet.io, grommetux, component, library, design system, framework, react, theme, theming, templates, sticker sheets, design patterns, app templates, atomic design, accessibility, WCAG 2.1, keyboard navigation, screen reader tags, color, type, layout, typography, interaction, ui, user interface, gui, graphical user interface, styled-components | ## Links - npm: https://www.npmjs.com/package/grommet - Repository: https://github.com/grommet/grommet - Homepage: http://grommet.io - Issues: https://github.com/grommet/grommet/issues - npm.io page: https://npm.io/package/grommet ## Dependencies (4) - [prop-types](https://npm.io/package/prop-types.md) ^15.8.1 - [grommet-icons](https://npm.io/package/grommet-icons.md) ^4.14.0 - [markdown-to-jsx](https://npm.io/package/markdown-to-jsx.md) 7.4.4 - [@emotion/is-prop-valid](https://npm.io/package/@emotion/is-prop-valid.md) ^1.4.0 ## Alternatives - [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads - [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads - [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads - [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads - [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads ## Recent versions - 2.57.0 (latest) — 2026-09-14 - 2.0.0-rc (next) — 2018-10-20 - 2.56.1 — 2026-08-18 - 2.56.0 — 2026-07-29 - 2.55.0 — 2026-06-04 - 2.54.0 — 2026-04-09 - 2.53.0 — 2026-02-23 - 2.52.0 — 2025-12-11 - 2.51.0 — 2025-11-13 - 2.50.0 — 2025-10-02 - 2.49.0 — 2025-09-10 - 2.48.0 — 2025-07-30 - 2.47.0 — 2025-05-05 - 2.46.1 — 2025-04-09 - 2.46.0 — 2025-03-19 - … 175 more at https://npm.io/package/grommet/versions ## README # Grommet: focus on the essential experience [![PRs Welcome](https://img.shields.io/badge/pr's-welcome-7d4cdb.svg)][contributing] [![slack](https://img.shields.io/badge/join%20the%20community-slack-fd6fff.svg)][slack] [![blogs](https://img.shields.io/badge/view%20blogs%20on-medium-000000.svg)][medium] [![npm package](https://img.shields.io/npm/v/grommet.svg?color=ffca58)][npm] [![npm downloads](https://img.shields.io/npm/dm/grommet.svg?color=3d138d)][npm] [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)][prettier] ## Documentation Visit the [Grommet] website for more information. ## Support / Contributing Before opening an issue or pull request, please read the [Contributing] guide. ## Install You can install Grommet using either of the methods given below. For npm users: ```shell $ npm install grommet styled-components --save ``` For Yarn users: ```shell $ yarn add grommet styled-components ``` There are more detailed instructions in the [Grommet Starter] app tutorial for new apps. For incorporating Grommet into an existing app, see the [Existing App] version. ## Explore 1. [Storybook] examples per component, you can create them locally by running: ```shell $ npm run storybook ``` or ```shell $ yarn storybook ``` 1. Grommet starter template [sandbox](https://codesandbox.io/p/sandbox/m7mml8l0zj?file=%2Findex.js). 1. [Templates, patterns, and starters][sandboxes]: feel free to share with us more pattern ideas on [Slack]. 1. End-to-end project examples from our community in the [#i-made-this Slack channel][slack]. 1. Read more from the Grommet team on [Medium]. ## Stable grommet is also available on a stable branch that is built with the content of the 'master' branch. From your package.json point to stable. ``` "grommet": "https://github.com/grommet/grommet/tarball/stable", ``` For more info, read the [stable wiki](https://github.com/grommet/grommet/wiki/What-is-grommet-stable-and-how-to-use-it%3F). ## Release History See the [Change Log]. ## Tools Behind Grommet Grommet is produced using this great tool: - [BrowserStack] for browser emulators and simulators. - [Circle CI] for continuous integration. [browserstack]: https://www.browserstack.com/ [change log]: https://github.com/grommet/grommet/wiki/Change-Log [circle ci]: https://circleci.com/gh/grommet/grommet/ [contributing]: CONTRIBUTING.md [existing app]: https://github.com/grommet/grommet-starter-existing-app [grommet starter]: https://github.com/grommet/grommet-starter-new-app [grommet]: https://grommet.io/ [medium]: https://medium.com/grommet-io [npm]: https://www.npmjs.com/package/grommet [prettier]: https://github.com/prettier/prettier [sandboxes]: https://codesandbox.io/u/grommetux/sandboxes [sandbox]: https://codesandbox.io/p/sandbox/m7mml8l0zj?file=%2Findex.js [slack]: https://slack-invite.grommet.io [storybook]: https://storybook.grommet.io --- _Source: https://npm.io/package/grommet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._