radix-primitives

Original：🇺🇸 English

Translated

Radix UI unstyled accessible primitives for dialogs, popovers, dropdowns, and more. Use when building custom accessible components, understanding shadcn internals, or needing polymorphic composition.

2installs

Sourceyonatangross/orchestkit

Added on2026-02-07

NPX Install

npx skill4agent add yonatangross/orchestkit radix-primitives

SKILL.md Content

View Translation Comparison →

Radix Primitives

Unstyled, accessible React components for building high-quality design systems.

Overview

Building custom styled components with full accessibility
Understanding how shadcn/ui works under the hood
Need polymorphic composition without wrapper divs
Implementing complex UI patterns (modals, menus, tooltips)

Primitives Catalog

Overlay Components

Primitive	Use Case
Dialog	Modal dialogs, forms, confirmations
AlertDialog	Destructive action confirmations
Sheet	Side panels, mobile drawers

Popover Components

Primitive	Use Case
Popover	Rich content on trigger
Tooltip	Simple text hints
HoverCard	Preview cards on hover
ContextMenu	Right-click menus

Menu Components

Primitive	Use Case
DropdownMenu	Action menus
Menubar	Application menubars
NavigationMenu	Site navigation

Form Components

Primitive	Use Case
Select	Custom select dropdowns
RadioGroup	Single selection groups
Checkbox	Boolean toggles
Switch	On/off toggles
Slider	Range selection

Disclosure Components

Primitive	Use Case
Accordion	Expandable sections
Collapsible	Single toggle content
Tabs	Tabbed interfaces

Core Pattern: asChild

The

asChild

prop enables polymorphic rendering without wrapper divs:

tsx

// Without asChild - creates nested elements
<Button>
  <Link href="/about">About</Link>
</Button>

// With asChild - merges into single element
<Button asChild>
  <Link href="/about">About</Link>
</Button>

How it works:

Uses Radix's internal
```
Slot
```
component
Merges props from parent to child
Forwards refs correctly
Combines event handlers (both fire)
Merges classNames

Built-in Accessibility

Every primitive includes:

Keyboard navigation: Arrow keys, Escape, Enter, Tab
Focus management: Trap, return, visible focus rings
ARIA attributes: Roles, states, properties
Screen reader: Proper announcements

Styling with Data Attributes

Radix exposes state via data attributes:

css

/* Style based on state */
[data-state="open"] { /* open styles */ }
[data-state="closed"] { /* closed styles */ }
[data-disabled] { /* disabled styles */ }
[data-highlighted] { /* keyboard focus */ }

tsx

// Tailwind arbitrary variants
<Dialog.Content className="data-[state=open]:animate-in data-[state=closed]:animate-out">

Quick Reference

tsx

import { Dialog, DropdownMenu, Tooltip } from 'radix-ui'

// Basic Dialog
<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Description>Description</Dialog.Description>
      <Dialog.Close>Close</Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Key Decisions

Decision	Recommendation
Styling approach	Data attributes + Tailwind arbitrary variants
Composition	Use `asChild` to avoid wrapper divs
Animation	CSS-only with data-state selectors
Form components	Combine with react-hook-form

Related Skills

```
shadcn-patterns
```
- Pre-styled Radix components
```
focus-management
```
- Accessibility patterns
```
design-system-starter
```
- Design system foundation

References

asChild Composition - Polymorphic rendering
Dialog Patterns - Dialog and AlertDialog
Dropdown Patterns - Menus and Select
Popover Patterns - Popover and Tooltip
Focus Management - Keyboard and focus