Reka UI（原 Radix Vue）把 Radix 的理念带进 Vue 3：Dialog、DropdownMenu、Popover、Tabs、Accordion 等无样式原语以 Composition API 全量 TypeScript 提供，键盘导航、焦点管理与读屏支持符合 WAI-ARIA，配合 Tailwind 可复刻 shadcn-vue 模式；零运行时开销、可摇树、SSR 兼容，主色紫（#8B5CF6）。适合 Vue 生态自建设计系统的团队。
Vue开发者工具
提示词模板
基础模板
Design a Reka UI-inspired interface. - Vue 3 Composition API headless components with full TypeScript support; - WAI-ARIA compliant: keyboard navigation, focus management, screen reader support; - Composable primitives: Dialog, DropdownMenu, Popover, Tabs, Accordion; - Styled with Tailwind CSS via Shadcn-Vue pattern; - Zero runtime overhead, tree-shakeable, SSR-compatible. Colors: #8B5CF6, #10B981, #F59E0B, #EF4444 with #8B5CF6 accent. Typography: system-ui.
变体提示词
📱 移动端
Design a mobile app with Reka UI aesthetics. Use Reka UI color identity with #8B5CF6 accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Reka UI style. Use Reka UI color identity with #8B5CF6 accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Reka UI design language. Use Reka UI color identity with #8B5CF6 accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Reka UI visual identity. Use Reka UI color identity with #8B5CF6 accents. Compelling, conversion-focused.
使用示例
Reka UI Vue 组件
Web 端Build a Vue 3 app with Reka UI design language, accessible dialogs, and #8B5CF6 color system.
Reka UI 仪表板
仪表板Create a Nuxt dashboard using Reka UI style with headless primitives and Tailwind CSS.
✅ 适合场景
- 框架生态
- Vue 3 项目
- Shadcn-Vue 生态
❌ 不适合场景
- React 技术栈项目
- 需要纯 CSS 方案的静态页
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。