组件库
无障碍
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规范就能创建完全可访问的界面。这种「默认无障碍」的思维值得所有设计系统学习。