Radix Primitives 是一套无样式、可访问的 React 组件原语，用于构建高质量的设计系统。
用途
它适用于以下场景：构建带完整可访问性的自定义样式组件；理解 shadcn/ui 在底层是如何工作的；需要多态组合而不产生包裹 div；实现复杂的 UI 模式（模态框、菜单、工具提示等）。
组件目录
覆盖层组件：Dialog 用于模态对话框、表单、确认；AlertDialog 用于破坏性操作确认；Sheet 用于侧边面板、移动端抽屉。
弹出层组件：Popover 用于触发器上的丰富内容；Tooltip 用于简单文字提示；HoverCard 用于悬停预览卡片；ContextMenu 用于右键菜单。
菜单组件：DropdownMenu 用于操作菜单；Menubar 用于应用菜单栏；NavigationMenu 用于站点导航。
表单组件：Select 用于自定义下拉选择；RadioGroup 用于单选组；Checkbox 用于布尔切换；Switch 用于开关切换；Slider 用于范围选择。
展开折叠组件：Accordion 用于可展开区块；Collapsible 用于单个切换内容；Tabs 用于标签页界面。
核心模式：asChild
asChild 属性支持多态渲染，避免包裹 div。不使用 asChild 时会产生嵌套元素；使用 asChild 时会合并为单个元素。其工作方式为：使用 Radix 内部的 Slot 组件，将父组件属性合并到子组件，正确转发 ref，合并事件处理器（两者都会触发），合并 className。
内置可访问性
每个原语都包含：键盘导航（方向键、Escape、Enter、Tab）；焦点管理（捕获、返回、可见焦点环）；ARIA 属性（角色、状态、属性）；屏幕阅读器（正确的播报）。
使用 data 属性进行样式定制
Radix 通过 data 属性暴露状态，例如 [data-state="open"]、[data-state="closed"]、[data-disabled]、[data-highlighted]。也可使用 Tailwind 任意变体，如 data-[state=open]:animate-in data-[state=closed]:animate-out。
快速参考
可从 'radix-ui' 导入 Dialog、DropdownMenu、Tooltip 等。基本 Dialog 结构包含 Dialog.Root、Dialog.Trigger、Dialog.Portal、Dialog.Overlay、Dialog.Content、Dialog.Title、Dialog.Description、Dialog.Close。
关键决策
样式方案：data 属性 + Tailwind 任意变体；组合方式：使用 asChild 避免包裹 div；动画：仅用 CSS 配合 data-state 选择器；表单组件：结合 react-hook-form。
相关技能
shadcn-patterns（预样式化的 Radix 组件）、focus-management（可访问性模式）、design-system-starter（设计系统基础）。
参考资料
asChild 组合（多态渲染）、Dialog 模式（Dialog 与 AlertDialog）、Dropdown 模式（菜单与 Select）、Popover 模式（Popover 与 Tooltip）、焦点管理（键盘与焦点）。