@radix-ui/primitive

What is @radix-ui/primitive?

The @radix-ui/primitive package provides foundational utilities for building accessible design systems and component libraries. It includes a set of low-level UI primitives that can be composed to create complex user interfaces with a focus on accessibility and customization.

What are @radix-ui/primitive's main functionalities?

Accessibility

Provides hooks like `useId` to generate unique IDs for accessibility purposes, ensuring elements such as labels and inputs are properly associated.

{"useId": () => { const id = useId(); return <div id={id}>Accessible Element</div>; }}

State Management

Offers utilities like `createContext` for state management within a component tree, allowing for shared state and context without prop drilling.

{"createContext": () => { const [MyContext, useMyContext] = createContext('MyContext'); return <MyContext.Provider value={/* some value */}><MyComponent /></MyContext.Provider>; }}

Styling

Includes a `styled` utility for theming and styling components, enabling a consistent design system across a UI.

{"styled": () => { const StyledComponent = styled('div', { color: 'red' }); return <StyledComponent>This is a styled component</StyledComponent>; }}

Other packages similar to @radix-ui/primitive

reakit

Reakit is a library that provides accessible, composable, and customizable components for React. It is similar to @radix-ui/primitive in its focus on accessibility and low-level primitives but also includes a more extensive set of pre-built components.

downshift

Downshift is a set of primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components. Its focus is primarily on autocomplete, dropdown, and combobox components, and it compares to @radix-ui/primitive by providing a similar level of accessibility and customization.

react-aria

React Aria provides a collection of React Hooks that manage state and accessibility for common UI components. It is similar to @radix-ui/primitive in its focus on accessibility and low-level functionality but is more focused on providing hooks for common patterns rather than a full suite of utilities.

README

primitive

Installation

$ yarn add @radix-ui/primitive
# or
$ npm install @radix-ui/primitive

Usage

This is an internal utility, not intended for public usage.