# grommet/grommet

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/grommet-grommet).**

8,354 stars · 1,036 forks · JavaScript · Apache-2.0

## Links

- GitHub: https://github.com/grommet/grommet
- Homepage: https://grommet.io
- awesome-repositories: https://awesome-repositories.com/repository/grommet-grommet.md

## Description

Grommet is a React UI framework and accessible component library designed for building themed user interfaces. It provides a responsive design system and a themed interface toolkit to ensure inclusive user experiences across various screen sizes and device orientations.

The framework emphasizes accessible UI development by providing pre-styled elements that follow web accessibility standards for screen readers and keyboard navigation. It enables the implementation of custom themes through a centralized system that manages visual styles and design tokens.

The toolkit covers responsive web design and modular React component architecture, utilizing a consistent grid and spacing system to create layouts that automatically adapt to different dimensions.

## Tags

### User Interface & Experience

- [Accessible UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-frameworks.md) — Provides an accessible UI framework for rendering responsive layouts that adhere to global accessibility standards. ([source](https://github.com/grommet/grommet/blob/master/package.json))
- [Accessible Component Libraries](https://awesome-repositories.com/f/user-interface-experience/accessible-component-libraries.md) — Ships a component library specifically optimized for compliance with modern accessibility standards for screen readers.
- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Provides reusable interface elements specifically designed for integration within the React ecosystem.
- [UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/ui-frameworks.md) — Provides a complete set of accessible and responsive components for building themed React user interfaces.
- [Design Token Theming](https://awesome-repositories.com/f/user-interface-experience/design-token-theming.md) — Implements design token theming to distribute consistent visual properties through a centralized context provider.
- [Interface Theming Systems](https://awesome-repositories.com/f/user-interface-experience/interface-theming-systems.md) — Provides a system for managing design tokens and applying visual themes across a consistent set of UI components.
- [Responsive Design](https://awesome-repositories.com/f/user-interface-experience/responsive-design.md) — Implements a design system with tools for creating adaptive layouts across different devices and orientations.
- [Constraint Based Layouts](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/constraint-based-layouts.md) — Provides layout models where components determine size and position based on parent-provided constraints and breakpoints.
- [Component-Driven Architectures](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/component-driven-architectures.md) — Implements a system for building complex interfaces by composing small, reusable UI components.
- [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/theme-architecture-frameworks/theme-customization.md) — Provides methods for adjusting visual styles by overriding centralized theme variables.
- [WAI-ARIA Frameworks](https://awesome-repositories.com/f/user-interface-experience/wai-aria-frameworks.md) — Includes a framework for automatically generating ARIA attributes and keyboard interaction patterns for accessibility compliance.
- [CSS-in-JS Implementations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/css-in-js-implementations.md) — Utilizes CSS-in-JS implementations to generate styles at runtime based on theme state and component props.

### Web Development

- [Responsive Layout Systems](https://awesome-repositories.com/f/web-development/responsive-layout-systems.md) — Implements a responsive layout system that automatically adjusts web interfaces to various screen sizes.

### Software Engineering & Architecture

- [Context State Propagators](https://awesome-repositories.com/f/software-engineering-architecture/state-synchronization-patterns/context-state-propagators.md) — Uses a provider pattern to share global configuration and theme state across the component tree.

### Part of an Awesome List

- [UI Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/ui-frameworks.md) — Advanced UX framework for enterprise-level applications.