# Grommet — Accessible React UI Framework by HPE

> A React component library created by Hewlett Packard Enterprise that prioritizes accessibility, responsive design, and theming. Provides a comprehensive set of layout, input, and visualization components with W3C accessibility compliance built in.

## Install

Save in your project root:

# Grommet — Accessible React UI Framework by HPE

## Quick Use
```bash
npm install grommet grommet-icons styled-components
# import { Grommet, Box, Button } from "grommet";
# <Grommet><Box pad="medium"><Button label="Hello" /></Box></Grommet>
```

## Introduction
Grommet is an accessibility-first React component library developed by Hewlett Packard Enterprise. It provides a rich set of components for building responsive, mobile-first web applications with a focus on meeting WCAG accessibility standards and supporting complex enterprise UI patterns out of the box.

## What Grommet Does
- Delivers 60+ components including layouts, forms, navigation, data visualization, and media elements
- Provides a theming system that controls colors, fonts, spacing, and component-level styles from a single object
- Implements W3C WCAG 2.1 accessibility standards with keyboard navigation and screen reader support
- Includes responsive grid and box layout primitives with flexbox-based alignment
- Offers a built-in icon set via the companion `grommet-icons` package

## Architecture Overview
Grommet is built on styled-components for CSS-in-JS styling. The `Grommet` root component accepts a theme object that cascades design tokens to all child components via React Context. Each component reads from the theme to render its styles, making it possible to create entirely different visual appearances without modifying component code. The layout system centers on `Box` and `Grid` primitives that compose into complex page structures. Data visualization components like `Meter`, `Chart`, and `DataChart` are SVG-based.

## Self-Hosting & Configuration
- Wrap your app with the `Grommet` component and pass a custom theme object
- Use the Grommet theme designer tool to visually create and export themes
- Install `grommet-icons` separately for the icon set
- Components are individually importable for tree-shaking with bundlers
- Set the `themeMode` prop to `dark` for automatic dark mode

## Key Features
- Accessibility baked into every component with ARIA attributes, focus management, and keyboard handlers
- Theme designer web tool for visually building and previewing custom themes
- Responsive props on layout components that accept breakpoint-keyed values
- Built-in form validation with declarative rules and error message display
- SVG-based data visualization components that respond to theme colors

## Comparison with Similar Tools
- **Chakra UI** — utility-prop-driven with a focus on developer experience; Grommet has a more structured theme object and deeper accessibility integration
- **Base Web** — Uber's atomic CSS approach; Grommet uses styled-components and has a visual theme designer
- **Ant Design** — larger component set with a specific design language; Grommet is more theme-flexible and accessibility-focused
- **Material UI (MUI)** — follows Material Design; Grommet follows HPE's design guidelines but is highly customizable

## FAQ
**Q: Is Grommet free for commercial use?**
A: Yes, Grommet is released under the Apache 2.0 license.

**Q: Can I use Grommet with Next.js?**
A: Yes, Grommet works with Next.js. Use the `ServerStyleSheet` from styled-components for SSR.

**Q: How do I create a custom theme?**
A: Start from the base theme and override specific keys, or use the Grommet theme designer at theme-designer.grommet.io.

**Q: Does Grommet support dark mode?**
A: Yes, pass `themeMode="dark"` to the `Grommet` component or define dark mode colors in your theme.

## Sources
- https://github.com/grommet/grommet
- https://v2.grommet.io

---
Source: https://tokrepo.com/en/workflows/asset-055fe8e7
Author: AI Open Source