radix-primitives

Overview

Radix UI provides unstyled, accessible React primitives (Dialog, Dropdown, Popover, Tooltip, etc.) that handle behavior, keyboard navigation, and ARIA attributes. Style them with Tailwind, CSS, or any CSS-in-JS.

Capabilities

• Fully accessible out of the box (WAI-ARIA compliant)
• Keyboard navigation and focus management
• Unstyled — bring your own design system
• Controlled and uncontrolled modes
• Composable with Tailwind CSS
• 30+ primitives: Dialog, DropdownMenu, Popover, Select, Tabs, etc.

When to Use

Trigger phrases:

• "radix primitives"

• "Building a custom design system from scratch"

• "Need accessible components without Material/Chakra styling"

• "Using shadcn/ui (built on Radix primitives)"

• Building a custom design system from scratch

• Need accessible components without Material/Chakra styling

• Using shadcn/ui (built on Radix primitives)

• Need fine-grained control over component behavior and appearance

When NOT to Use

• Task is about content strategy, not creation (use strategy skills)
• Task is about content distribution (use distribution skills)
• You need to analyze content performance (use analytics skills)
• Task is about content moderation (use moderation tools)
• You don't have content guidelines
• Task requires domain expertise (consult experts)

Pseudo Code

The radix-primitives workflow follows a standard pipeline pattern.

Core flow:

# radix-primitives primary flow
input = prepare(raw_data)
result = process(input, config={accessible, components, dialogs, dropdowns, headless})
validate(result)
deliver(result)

Error handling:

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Core Workflow

# radix-primitives primary flow
input = prepare(raw_data)
result = process(input, config={accessible, components, dialogs, dropdowns, headless})
validate(result)
deliver(result)

Error Handling

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()