Grommet
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
Install / Use
/learn @grommet/GrommetREADME
Grommet: focus on the essential experience
<img align="right" height="260" src="https://v2.grommet.io/img/stak-hurrah.svg">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:
$ npm install grommet styled-components --save
For Yarn users:
$ 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
-
Storybook examples per component, you can create them locally by running:
$ npm run storybookor
$ yarn storybook -
Grommet starter template sandbox.
-
Templates, patterns, and starters: feel free to share with us more pattern ideas on Slack.
-
End-to-end project examples from our community in the #i-made-this Slack channel.
-
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.
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.
Related Skills
bluebubbles
335.9kUse when you need to send or manage iMessages via BlueBubbles (recommended iMessage integration). Calls go through the generic message tool with channel="bluebubbles".
slack
335.9kUse when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
frontend-design
82.7kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Agent Development
82.7kThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
