# zendeskgarden/react-components

**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/zendeskgarden-react-components).**

1,110 stars · 101 forks · TypeScript · Apache-2.0

## Links

- GitHub: https://github.com/zendeskgarden/react-components
- Homepage: https://zendeskgarden.github.io/react-components/
- awesome-repositories: https://awesome-repositories.com/repository/zendeskgarden-react-components.md

## Description

This project is a comprehensive design system framework and component library built for React. It provides a suite of modular, accessible, and themeable interface elements designed to maintain a unified visual language and brand alignment across complex web applications. By encapsulating interaction logic and styling within individual components, it enables developers to build consistent, responsive interfaces through declarative composition.

The library distinguishes itself by prioritizing inclusive user experiences through built-in accessibility management, including standardized keyboard navigation and focus handling. It utilizes a centralized styling engine and design token injection to propagate visual variables like colors, typography, and spacing throughout the component tree. This architecture ensures that all elements, from form controls and navigation to modal overlays and feedback indicators, adhere to a predictable and standardized design pattern.

Beyond the core components, the project includes a suite of development tools to support the entire lifecycle of a design system. This includes utilities for component scaffolding, automated integrity testing, and package bundling within a monorepo structure. It also provides an interactive documentation workflow that allows developers to preview and test components in isolation during the development process.

## Tags

### User Interface & Experience

- [Design Tokens & Themeable Components](https://awesome-repositories.com/f/user-interface-experience/custom-ui-components/design-tokens-themeable-components.md) — Provides a standardized set of accessible and themeable interface elements for building consistent web applications. ([source](https://github.com/zendeskgarden/react-components/blob/main/CHANGELOG.md))
- [React UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/react-ui-component-libraries.md) — Provides a comprehensive React component library of accessible and themeable interface elements for building complex web applications.
- [Accessibility Management](https://awesome-repositories.com/f/user-interface-experience/accessibility-management.md) — Encapsulates complex accessibility and keyboard navigation logic into reusable functions for inclusive user experiences. ([source](https://github.com/zendeskgarden/react-components/blob/main/docs/api.md))
- [Accessible UI Components](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components.md) — Provides a suite of reusable interface components that encapsulate complex accessibility logic for inclusive user experiences.
- [Declarative Component Architectures](https://awesome-repositories.com/f/user-interface-experience/declarative-component-architectures.md) — Builds complex interface elements through hierarchical nesting of reusable functional units.
- [Design System Implementations](https://awesome-repositories.com/f/user-interface-experience/design-system-implementations.md) — Implements a comprehensive design system framework that ensures visual consistency and brand alignment through centralized tokens and modular components.
- [Interaction Hooks](https://awesome-repositories.com/f/user-interface-experience/interaction-hooks.md) — Provides reusable hooks for encapsulating complex keyboard navigation and focus management logic to ensure inclusive user experiences.
- [UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries.md) — Ships a collection of flexible, responsive interface elements that automatically adjust their layout and behavior for different screen sizes.
- [Accessible Form Controls](https://awesome-repositories.com/f/user-interface-experience/accessible-form-controls.md) — Implements standard form fields that follow established design patterns to ensure consistent interaction and accessibility. ([source](https://github.com/zendeskgarden/react-components/blob/main/packages/forms))
- [Component Documentation](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components/component-documentation.md) — Includes an interactive documentation workflow that allows developers to preview and test components in isolation.
- [Color Theme Managers](https://awesome-repositories.com/f/user-interface-experience/color-theme-managers.md) — Manages and applies consistent color schemes and design tokens across an application to maintain a unified visual aesthetic. ([source](https://github.com/zendeskgarden/react-components/blob/main/CHANGELOG.md))
- [Design Tokens](https://awesome-repositories.com/f/user-interface-experience/design-token-management/design-tokens.md) — Propagates standardized design variables like colors and spacing through a provider pattern for global brand alignment.
- [Floating Element Positioning](https://awesome-repositories.com/f/user-interface-experience/floating-element-positioning.md) — Calculates dynamic coordinates for overlays and menus to ensure they remain visible and correctly aligned within the viewport.
- [Form Input Validation](https://awesome-repositories.com/f/user-interface-experience/form-input-validation.md) — Validates form data by displaying clear error messages and status indicators to provide immediate feedback. ([source](https://github.com/zendeskgarden/react-components/blob/main/packages/forms))
- [Web Accessibility Compliance](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/web-accessibility-compliance.md) — Provides standardized keyboard navigation and focus management to ensure inclusive user experiences across all interface elements.
- [Interactive Form Controls](https://awesome-repositories.com/f/user-interface-experience/interactive-form-controls.md) — Provides standardized form controls and validation patterns to ensure predictable user input and consistent feedback.
- [Interface Component Libraries](https://awesome-repositories.com/f/user-interface-experience/interface-component-libraries.md) — Offers a suite of modular building blocks including forms, modals, and navigation elements for constructing functional user interfaces.
- [Modal Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-dialogs/modal-overlays.md) — Renders overlay windows that focus user attention on specific tasks while temporarily obscuring underlying content. ([source](https://github.com/zendeskgarden/react-components/blob/main/packages/modals))
- [Selection Menus](https://awesome-repositories.com/f/user-interface-experience/selection-menus.md) — Renders accessible dropdown menus that support keyboard navigation and custom triggers for selecting items from a list. ([source](https://github.com/zendeskgarden/react-components/blob/main/packages/dropdowns))
- [Styling Engines](https://awesome-repositories.com/f/user-interface-experience/styling-engines.md) — Applies consistent visual design and layout properties to components to maintain a unified aesthetic. ([source](https://github.com/zendeskgarden/react-components/blob/main/docs/api.md))
- [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) — Injects component-specific styles directly into the document head for consistent visual design and theme application.
- [Theme Configuration Systems](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/theme-architecture-frameworks/theme-configuration-systems.md) — Injects standardized color palettes, typography, and spacing variables into the component tree to ensure visual consistency. ([source](https://github.com/zendeskgarden/react-components/blob/main/packages/theming))
- [Status Notifications](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/notification-systems/status-notifications.md) — Provides standardized, transient alert components for communicating system status, errors, and success messages to users. ([source](https://github.com/zendeskgarden/react-components/blob/main/packages/notifications))
- [User Interaction Patterns](https://awesome-repositories.com/f/user-interface-experience/user-interaction-patterns.md) — Implements standardized behavior for common interface patterns such as dropdown selection and modal focus management. ([source](https://github.com/zendeskgarden/react-components/blob/main/CHANGELOG.md))
- [Design System Consistency](https://awesome-repositories.com/f/user-interface-experience/visual-consistency-tooling/design-system-consistency.md) — Defines standardized styling tokens and layout patterns to maintain consistent brand alignment throughout an application.
- [Row-and-Column Layouts](https://awesome-repositories.com/f/user-interface-experience/widget-arrangement-systems/row-and-column-layouts.md) — Organizes interface elements into flexible rows and columns that automatically adjust to fit different screen widths. ([source](https://github.com/zendeskgarden/react-components/blob/main/packages/grid))

### Development Tools & Productivity

- [Component Scaffolding](https://awesome-repositories.com/f/development-tools-productivity/component-scaffolding.md) — Generates standardized file structures for new interface elements to ensure consistency across the codebase. ([source](https://github.com/zendeskgarden/react-components/blob/main/docs/development.md))
- [Dependency Management Systems](https://awesome-repositories.com/f/development-tools-productivity/dependency-management-systems.md) — Coordinates shared peer dependencies across packages to ensure consistent styling and rendering behavior. ([source](https://github.com/zendeskgarden/react-components/blob/main/docs/versioning.md))
- [Documentation Previewers](https://awesome-repositories.com/f/development-tools-productivity/documentation-previewers.md) — Provides a development server for interactive component demonstrations with automatic reloading to facilitate rapid visual development. ([source](https://github.com/zendeskgarden/react-components/blob/main/docs/development.md))

### Programming Languages & Runtimes

- [Package Component Bundling](https://awesome-repositories.com/f/programming-languages-runtimes/package-component-bundling.md) — Compiles source code into multiple distribution formats including common modules and type definitions for broad compatibility. ([source](https://github.com/zendeskgarden/react-components/blob/main/docs/development.md))

### Software Engineering & Architecture

- [Monorepo Orchestration](https://awesome-repositories.com/f/software-engineering-architecture/monorepo-orchestration.md) — Orchestrates dependencies and build pipelines across multiple packages within a single repository.
- [Component-Based Encapsulations](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/scope-and-hierarchy-management/closure-based-state-encapsulations/component-based-encapsulations.md) — Isolates internal interaction logic within individual components to provide a predictable and standardized public interface.

### Testing & Quality Assurance

- [Visual Consistency Testing](https://awesome-repositories.com/f/testing-quality-assurance/automation-interaction-tools/test-automation-architecture/visual-consistency-testing.md) — Executes automated visual consistency tests to ensure interface elements maintain correct rendering across browsers and screen sizes. ([source](https://github.com/zendeskgarden/react-components/blob/main/docs/development.md))

### Web Development

- [Component Composition](https://awesome-repositories.com/f/web-development/component-composition.md) — Wraps interaction logic and visual styling into high-level components to provide a standardized public interface. ([source](https://github.com/zendeskgarden/react-components/blob/main/docs/api.md))

### Part of an Awesome List

- [React](https://awesome-repositories.com/f/awesome-lists/more/react.md) — Listed in the “React” section of the Awesome Ui Component Library awesome list.