# reach/reach-ui

**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/reach-reach-ui).**

5,977 stars · 559 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/reach/reach-ui
- Homepage: https://reacttraining.com/reach-ui/
- awesome-repositories: https://awesome-repositories.com/repository/reach-reach-ui.md

## Description

Reach UI is an open-source library of accessible, low-level React components designed to serve as a foundation for building design systems and interactive user interfaces. It is an accessibility-first toolkit that handles core concerns like ARIA attributes, focus management, and screen reader support automatically, without requiring developer configuration.

The library is built as a collection of standalone packages, each managing its own lifecycle and dependencies, enabling granular adoption and tree-shaking. Components use a polymorphic rendering pattern, accepting an `as` prop to render as any HTML element or custom component while preserving accessibility attributes and event bindings. Internal state and interactions are managed through custom React hooks, isolating logic from rendering for testability and reuse.

Reach UI provides a comprehensive focus management system that controls and tracks keyboard focus within interactive elements, particularly in modals, menus, and complex widgets. It includes a keyboard-event delegation system that maps standard navigation patterns like arrow keys and tab stops to component actions, and a screen-reader announcement bus that broadcasts state changes to assistive technologies without visual disruption. The library also implements focus-trap and focus-restore mechanisms to contain focus within modals and dialogs, restoring it to the triggering element on close.

## Tags

### Part of an Awesome List

- [React Component Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/react-component-libraries.md) — Provides an accessible React component library with keyboard navigation, focus management, and screen reader support.

### Development Tools & Productivity

- [Element Focus Controllers](https://awesome-repositories.com/f/development-tools-productivity/window-managers/element-focus-controllers.md) — Controls and tracks keyboard focus within interactive elements like modals, menus, and complex widgets.

### User Interface & Experience

- [Accessible Component Libraries](https://awesome-repositories.com/f/user-interface-experience/accessible-component-libraries.md) — Offers a library of accessible React components with built-in keyboard navigation and screen reader support.
- [Accessible Interaction Toolkits](https://awesome-repositories.com/f/user-interface-experience/accessible-interaction-toolkits.md) — Provides a toolkit of React components that handle ARIA attributes and focus management automatically.
- [Accessible UI Components](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components.md) — Provides accessible UI primitives that handle keyboard navigation, focus management, and screen reader announcements. ([source](https://reach.tech/))
- [Polymorphic Component Rendering](https://awesome-repositories.com/f/user-interface-experience/buttons/custom-html-elements/polymorphic-component-rendering.md) — Ships polymorphic components that accept an `as` prop to render as any HTML element or custom component.
- [Focus Traps](https://awesome-repositories.com/f/user-interface-experience/focus-traps.md) — Provides focus-trap and focus-restore mechanisms for modals and dialogs using React refs.
- [Keyboard Event Delegation](https://awesome-repositories.com/f/user-interface-experience/keyboard-event-handlers/keyboard-event-delegation.md) — Centralizes keyboard event handling to map interactions to component actions for navigation patterns.
- [Keyboard Navigation](https://awesome-repositories.com/f/user-interface-experience/keyboard-navigation.md) — Implements full keyboard interaction support for web applications, ensuring mouse-free accessibility.
- [React Design System Libraries](https://awesome-repositories.com/f/user-interface-experience/react-design-system-libraries.md) — Ships an open-source library of accessible, low-level React components for building design systems.
- [Screen Reader Live Regions](https://awesome-repositories.com/f/user-interface-experience/screen-reader-live-regions.md) — Injects dynamic live-region elements into the DOM to broadcast state changes to assistive technologies.
- [ARIA Attribute Injection](https://awesome-repositories.com/f/user-interface-experience/wai-aria-frameworks/aria-attribute-injection.md) — Automatically injects ARIA roles, states, and properties into the DOM without developer configuration.

### Software Engineering & Architecture

- [Design System Foundations](https://awesome-repositories.com/f/software-engineering-architecture/design-system-foundations.md) — Serves as a foundation for creating consistent, reusable UI patterns and design systems across React applications.

### Web Development

- [Standalone Package Architectures](https://awesome-repositories.com/f/web-development/component-based-architectures/component-based-architectures/standalone-package-architectures.md) — Organizes UI primitives as standalone packages with independent lifecycles and versioning.
- [Custom State Hooks](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/react-ecosystem/react-hooks/custom-state-hooks.md) — Manages component state and interactions through custom React hooks for testability and reuse.