# radix-ui/primitives

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

18,642 stars · 1,115 forks · TypeScript · mit

## Links

- GitHub: https://github.com/radix-ui/primitives
- Homepage: https://radix-ui.com/primitives
- awesome-repositories: https://awesome-repositories.com/repository/radix-ui-primitives.md

## Topics

`accessibility` `colors` `component-library` `design-systems` `radix-ui` `react` `ui` `ui-components` `ui-kit`

## Description

Primitives is a library of unstyled, accessible building blocks designed for creating complex interface elements in React. It functions as a headless component framework, providing the underlying logic, state management, and accessibility compliance while leaving all visual styling and design decisions entirely to the developer.

The library distinguishes itself through a composition-based architecture that allows developers to build interactive interfaces by nesting small, single-purpose components. This system automatically handles complex requirements such as WAI-ARIA attribute injection, focus management, and keyboard navigation. By intercepting and normalizing browser events, the framework ensures consistent interaction behavior across different input devices and browsers.

The components support both controlled and uncontrolled state patterns, allowing developers to either delegate state management to the library or override it for specific application requirements. This approach provides a foundation for custom design system engineering, where the structural and functional logic of interface elements remains decoupled from their appearance.

## Tags

### User Interface & Experience

- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Provides a foundational library of unstyled, accessible React components for building complex, custom interface elements.
- [Accessible Component Libraries](https://awesome-repositories.com/f/user-interface-experience/accessible-component-libraries.md) — Implements a suite of accessible, headless components that ensure WAI-ARIA compliance, focus management, and keyboard navigation for web interfaces.
- [Accessible UI Components](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components.md) — Provides accessible UI components that automatically handle focus management and keyboard navigation. ([source](https://www.radix-ui.com/primitives/docs))
- [Headless UI Components](https://awesome-repositories.com/f/user-interface-experience/headless-ui-components.md) — Functions as a headless framework providing logic and accessibility for interface elements without enforcing visual styles.
- [Declarative UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/rendering-models/declarative-frameworks/declarative-ui-frameworks.md) — Provides a declarative framework for building interactive interfaces using composition-based patterns.
- [Component Composition Primitives](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-composition/component-composition-primitives.md) — Provides modular primitives that encapsulate behavioral logic to facilitate the composition of complex user interface components.
- [Custom Component Builders](https://awesome-repositories.com/f/user-interface-experience/custom-component-extensions/custom-component-builders.md) — Offers unstyled building blocks that allow developers to customize the visual style and structure of interface elements. ([source](https://www.radix-ui.com/primitives/docs))
- [Design System Specifications](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-system-specifications.md) — Supports custom design system engineering by providing unstyled primitives that accept custom properties.
- [Ref Forwarding](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-communication-patterns/ref-forwarding.md) — Uses reference forwarding to allow parent components to access and manipulate the underlying DOM nodes of children.
- [Attribute Injection](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/data-binding-syntax/html-attribute-bindings/html-attribute-bindings/attribute-injection.md) — Automatically injects accessibility attributes and keyboard event listeners into rendered DOM elements.
- [Cross-Browser Event Managers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling-systems/cross-browser-event-managers.md) — Manages complex interactions by intercepting and normalizing browser events for consistent cross-browser behavior.

### Software Engineering & Architecture

- [Headless Logic Decoupling](https://awesome-repositories.com/f/software-engineering-architecture/headless-logic-decoupling.md) — Decouples logic and accessibility behaviors from visual styling to provide full control over component appearance.
- [Context State Propagators](https://awesome-repositories.com/f/software-engineering-architecture/state-synchronization-patterns/context-state-propagators.md) — Implements mechanisms for sharing application state across component trees using provider patterns.
- [Declarative State Managers](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/state-management-patterns/declarative-state-managers.md) — Handles internal component state through patterns that allow developers to manage or delegate data flow.

### Web Development

- [Component State Management](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/component-lifecycle-utilities/component-state-management.md) — Enables flexible state management by allowing developers to choose between automatic handling or manual overrides. ([source](https://www.radix-ui.com/primitives/docs))
- [Complex State Management](https://awesome-repositories.com/f/web-development/complex-state-management.md) — Provides tools for handling complex internal data logic for interactive interface elements.
- [Internal State Definitions](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/internal-state-definitions.md) — Supports flexible state patterns by allowing developers to choose between controlled and uncontrolled component data logic.
- [Event Normalizers](https://awesome-repositories.com/f/web-development/event-systems/event-normalizers.md) — Standardizes browser events to ensure consistent interaction behavior across different input devices and web browsers.