Grommet

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.

Features

Accessible UI Frameworks - Provides an accessible UI framework for rendering responsive layouts that adhere to global accessibility standards.
Accessible Component Libraries - Ships a component library specifically optimized for compliance with modern accessibility standards for screen readers.
React Components - Provides reusable interface elements specifically designed for integration within the React ecosystem.
UI Frameworks - Provides a complete set of accessible and responsive components for building themed React user interfaces.
Design Token Theming - Implements design token theming to distribute consistent visual properties through a centralized context provider.
Interface Theming Systems - Provides a system for managing design tokens and applying visual themes across a consistent set of UI components.
Responsive Design - Implements a design system with tools for creating adaptive layouts across different devices and orientations.
Constraint Based Layouts - Provides layout models where components determine size and position based on parent-provided constraints and breakpoints.
Component-Driven Architectures - Implements a system for building complex interfaces by composing small, reusable UI components.
Theme Customization - Provides methods for adjusting visual styles by overriding centralized theme variables.
WAI-ARIA Frameworks - Includes a framework for automatically generating ARIA attributes and keyboard interaction patterns for accessibility compliance.
Responsive Layout Systems - Implements a responsive layout system that automatically adjusts web interfaces to various screen sizes.
Context State Propagators - Uses a provider pattern to share global configuration and theme state across the component tree.
CSS-in-JS Implementations - Utilizes CSS-in-JS implementations to generate styles at runtime based on theme state and component props.
UI Frameworks - Advanced UX framework for enterprise-level applications.
React - Listed in the “React” section of the Awesome Ui Component Library awesome list.

Historique des stars

grommetgrommet

Name: grommet/grommet
Author: grommet

View on GitHub

8,354 stars1,036 forksJavaScriptApache-2.08 vuesgrommet.io

Grommet

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.

Features

Accessible UI Frameworks - Provides an accessible UI framework for rendering responsive layouts that adhere to global accessibility standards.
Accessible Component Libraries - Ships a component library specifically optimized for compliance with modern accessibility standards for screen readers.
React Components - Provides reusable interface elements specifically designed for integration within the React ecosystem.
UI Frameworks - Provides a complete set of accessible and responsive components for building themed React user interfaces.
Design Token Theming - Implements design token theming to distribute consistent visual properties through a centralized context provider.
Interface Theming Systems - Provides a system for managing design tokens and applying visual themes across a consistent set of UI components.
Responsive Design - Implements a design system with tools for creating adaptive layouts across different devices and orientations.
Constraint Based Layouts - Provides layout models where components determine size and position based on parent-provided constraints and breakpoints.
Component-Driven Architectures - Implements a system for building complex interfaces by composing small, reusable UI components.
Theme Customization - Provides methods for adjusting visual styles by overriding centralized theme variables.
WAI-ARIA Frameworks - Includes a framework for automatically generating ARIA attributes and keyboard interaction patterns for accessibility compliance.
Responsive Layout Systems - Implements a responsive layout system that automatically adjusts web interfaces to various screen sizes.
Context State Propagators - Uses a provider pattern to share global configuration and theme state across the component tree.
CSS-in-JS Implementations - Utilizes CSS-in-JS implementations to generate styles at runtime based on theme state and component props.
UI Frameworks - Advanced UX framework for enterprise-level applications.
React - Listed in the “React” section of the Awesome Ui Component Library awesome list.

Alternatives open source à Grommet

Projets open source similaires, classés selon le nombre de fonctionnalités partagées avec Grommet.

palantir/blueprint
palantir/blueprint
21,836Voir sur GitHub
Blueprint is a React UI component library and web design system focused on accessibility and the creation of data-dense interfaces. It provides a standardized framework of visual styles and reusable interface elements for building professional desktop applications. The toolkit is specifically optimized for displaying complex information and large datasets, featuring high-performance interactive data grids for rendering and manipulating data. The library covers a broad range of capability areas, including the construction of form inputs, navigation systems, and content layout management. It a
TypeScriptblueprintcomponentsdesign
Voir sur GitHub21,836
react-toolbox/react-toolbox
react-toolbox/react-toolbox
8,619Voir sur GitHub
React Toolbox is a Material Design React component library and cross-platform UI kit. It provides a set of pre-styled user interface components that implement the Material Design specification to ensure consistent layouts and interaction patterns. The library utilizes a CSS Modules styling framework to provide scoped design variables and theme overrides. This approach allows for global theming and fine-grained visual adjustments through a variable-based theme engine and custom property style overrides. The project supports server-side rendering, enabling components to generate HTML on the ba
JavaScript
Voir sur GitHub8,619
carbon-design-system/carbon
carbon-design-system/carbon
9,172Voir sur GitHub
Carbon is an enterprise design system that provides a comprehensive collection of reusable UI components, design tokens, and guidelines for building professional web applications. It functions as a CSS framework that enforces a unified design language across projects through standardized typography, spacing, and color palettes. The system utilizes a platform-agnostic design token system to maintain visual consistency across different technologies. This includes centralized management of brand colors, motion easing curves, and a curated library of accessible SVG icons. The framework covers a
TypeScript
Voir sur GitHub9,172
elastic/eui
elastic/eui
6,337Voir sur GitHub
EUI is a React UI component library and design system framework. It provides a collection of reusable, typed interface components and visual guidelines to ensure a unified user experience across web application layouts. The project functions as a themed UI toolkit, enabling the management of visual aesthetics and the ability to toggle between light and dark modes. It incorporates a CSS-in-JS styling library for defining custom styles and rulesets for individual application elements. The framework covers broad capability areas including design system implementation, custom interface styling,
TypeScript
Voir sur GitHub6,337

Voir les 30 alternatives à Grommet

Questions fréquentes

Que fait grommet/grommet ?

Quelles sont les fonctionnalités principales de grommet/grommet ?

Les fonctionnalités principales de grommet/grommet sont : Accessible UI Frameworks, Accessible Component Libraries, React Components, UI Frameworks, Design Token Theming, Interface Theming Systems, Responsive Design, Constraint Based Layouts.

Quelles sont les alternatives open-source à grommet/grommet ?

Les alternatives open-source à grommet/grommet incluent : palantir/blueprint — Blueprint is a React UI component library and web design system focused on accessibility and the creation of… react-toolbox/react-toolbox — React Toolbox is a Material Design React component library and cross-platform UI kit. It provides a set of pre-styled… elastic/eui — EUI is a React UI component library and design system framework. It provides a collection of reusable, typed interface… carbon-design-system/carbon — Carbon is an enterprise design system that provides a comprehensive collection of reusable UI components, design… geekyants/nativebase — NativeBase is a comprehensive toolkit of accessible components and responsive design frameworks used to build… segmentio/evergreen — Evergreen is a React UI component library and design system framework. It provides a collection of pre-styled,…