Grommet
Grommet documentation.
About Grommet
Grommet is a React-based UI framework and component library for building responsive, mobile-first web applications. It combines design-system and framework elements, offering theming tools for customizing color, type, layout, and component interaction, along with layout support built on Flexbox and CSS Grid.
The framework includes accessibility support aligned with W3C's WCAG 2.1 specification, covering keyboard navigation and screen reader tags. Companion tools include Grommet Designer, a WYSIWYG interface for building and publishing component-based experiences, Grommet Themer for customizing branding, and Grommet Icons.
It is aimed at developers and designers working with React who want a component library supporting both new projects and integration into existing codebases. The site itself is a progressive web app and requires JavaScript to function.
Key features
- React-based component library for building responsive, accessible web apps
- Supports W3C WCAG 2.1 accessibility spec with keyboard navigation and screen reader tags
- Theming tools to customize color, type, and layout to match a brand
- Responsive layouts using Flexbox and CSS Grid
- Grommet Designer for building and publishing UI experiences via a WYSIWYG interface
- Grommet Themer for customizing and sharing brand-specific themes
Frequently asked questions
What is Grommet built with?
Grommet is a React-based framework that provides accessibility, modularity, responsiveness, and theming.
Is Grommet accessible?
Yes, Grommet supports W3C's WCAG 2.1 spec with features like keyboard navigation and screen reader tags.
Does Grommet support responsive design for different devices?
Yes, it uses Flexbox and CSS Grid to provide layouts for phones and widescreen displays.
Are there tools for designing with Grommet without coding?
Yes, Grommet Designer lets you build and publish UI experiences with a WYSIWYG interface, and Grommet Icons provides icon assets.
Is there an older version of Grommet available?
Yes, Grommet v1 is still available alongside the current version.
Show your product to thousands of developers
· 100k monthly pageviews
· 7k newsletter subscribers
You might also like
D3.js
Library/ProgrammingD3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.
daisyUI
Library/Programming/UITailwind CSS Components plugin — daisyUI tailwind component library.
Flowbite
Icon/Library/UIGet started with an open-source library of over 600+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.
Indie UI
UI/LibraryUI components with variants.
Kometa UI Kit
Library/UIA marketplace of fully responsive, multi-purpose UI kits, built with Tailwind CSS, for start-ups and products of any kind.
Lenis
LibraryA smooth scroll library fresh out of darkroom.engineering.
