@radix-ui/react-primitive

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}"}