--- name: radix-primitives description: Radix UI unstyled accessible primitives for dialogs, popovers, dropdowns, and more. Use when building custom accessible components, understanding shadcn internals, or needing polymorphic composition. context: fork agent: frontend-ui-developer version: 1.0.0 tags: [radix, ui, primitives, accessibility, dialog, popover, dropdown, aschild, a11y] user-invocable: false --- # 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