@radix-ui/react-primitive

What is @radix-ui/react-primitive?

The @radix-ui/react-primitive package provides foundational components and utilities that are used to build accessible design systems with React. It includes primitives for accessibility, styling, and state management, which can be composed to create more complex UI components.

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

Accessibility Primitives

This feature provides components that help manage accessibility concerns, such as visually hiding content while keeping it accessible to screen readers.

{"import { VisuallyHidden } from '@radix-ui/react-primitive';\n\nfunction MyComponent() {\n  return (\n    <VisuallyHidden>This text is visually hidden but accessible to screen readers</VisuallyHidden>\n  );\n}"}

Styling Primitives

This feature includes utilities for styling components using a CSS-in-JS approach, allowing for theme-based styling and dynamic styles.

{"import { styled } from '@radix-ui/react-primitive';\n\nconst StyledButton = styled('button', {\n  backgroundColor: 'crimson',\n  color: 'white',\n  borderRadius: '9999px',\n});\n\nfunction MyComponent() {\n  return <StyledButton>Click me</StyledButton>;\n}"}

State Management Primitives

This feature provides utilities for managing state within components, such as generating unique IDs for DOM elements.

{"import { createId } from '@radix-ui/react-primitive';\n\nfunction MyComponent() {\n  const id = createId();\n  return <div id={id}>Unique content</div>;\n}"}

Other packages similar to @radix-ui/react-primitive

reakit

Reakit is a library that provides accessible, composable, and customizable components for React. It is similar to @radix-ui/react-primitive in that it focuses on accessibility and composition but offers a more extensive set of components out of the box.

styled-components

Styled-components is a CSS-in-JS library for styling React components. It is similar to the styling aspect of @radix-ui/react-primitive but is more focused on the styling itself rather than providing a full suite of primitives.

emotion

Emotion is another CSS-in-JS library that allows for styling applications using JavaScript. It is comparable to the styling primitives provided by @radix-ui/react-primitive and offers a similar API for defining styles.

README

react-primitive

Installation

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

Usage

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