组件库
无障碍
Headless
Radix UI
无障碍优先的现代组件库,为无障碍而生的Headless UI
🎯 核心理念
Radix UI 是一个无障碍(Accessibility)优先的组件库。它提供未经样式化的原始组件,让开发者完全控制外观,同时自动获得WAI-ARIA支持。
🎨 设计基因
- 无障碍优先:所有组件内置WAI-ARIA,无需额外配置
- Headless架构:只提供逻辑和可访问性,样式完全自定义
- 键盘导航:完整的焦点管理和键盘交互
- TypeScript:完整的类型定义
🗝️ 核心组件
// Dialog 对话框
import * as Dialog from '@radix-ui/react-dialog';
Open
Title
// Dropdown Menu
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
🎭 风格还原要点
- 基础风格:暗色背景 #0D1117,卡片 #1A202C
- 强调色:#3FC1D0 (cyan) 用于交互状态
- 圆角:6-8px,柔和但不过度
- 间距:基于4px网格系统
- 动画:150-200ms ease-out 过渡
📊 与其他设计系统对比
| 特性 |
Radix |
Shadcn |
Headless |
| 无障碍 |
✅ 内置 |
✅ |
✅ |
| 样式定制 |
✅ 完全 |
⚠️ Tailwind |
✅ 完全 |
| 学习曲线 |
⭐ 低 |
⭐ 中 |
⭐ 中 |
💡 设计师洞见
Radix UI 的价值在于「无障碍不应该是一门学问」。它让开发者无需深入了解WAI-ARIA规范就能创建完全可访问的界面。这种「默认无障碍」的思维值得所有设计系统学习。