重构移动端导航
设计 · 中优先级
源码属于你
组件写进你的仓库，而不是藏在 node_modules 里，可以随时改。
按需取用
wui CLI 只拉取需要的组件，并自动带上它依赖的 registry 项。
主题可控
Tailwind v4 的 oklch CSS 变量，浅色与深色共用同一套 token。
AI 友好
通过 MCP 把真实的属性与用法交给 Claude Code、Cursor 等工具。
精选组件
下面全部是真实渲染的组件，可以直接拖动、点击和输入。
看板
Kanban待规划
1进行中
2日历键盘交互
开发 · 高优先级
校对深色主题 token
设计系统 · 中
已完成
1确认组件 API
开发 · 已完成
AI 待办
AI Todo- 读取现有页面结构
- 实现新的落地页布局保留主题变量与键盘交互。
- 核对移动端密度
对话气泡
Bubble林
评审意见整理好了，键盘操作还要再确认一次。
我
好，我来补齐焦点顺序和 Escape 关闭。
时间轴
Timeline版本已发布
v2.4.0 已部署到生产环境。
审核已通过
设计与无障碍检查均已完成。
提交变更
合并了 12 个组件更新。
颜色选择器
Color Pickeroklch(0.546 0.245 262.881)感知色彩通道、透明度与精确 CSS 值，直接输出设计 Token。
表格
Table| 单号 | 状态 | 付款方式 | 金额 |
|---|---|---|---|
| INV-2048 | 已支付 | 信用卡 | ¥2,320 |
| INV-2047 | 待支付 | 银行转账 | ¥1,145 |
| INV-2046 | 已支付 | 支付宝 | ¥865 |
| INV-2045 | 已逾期 | 信用卡 | ¥4,110 |
数字动效
Sliding Number本月经常性收入¥k
开关与滑块
Switch · Slider重要通知更新与提及
深色外观跟随系统
输出音量62%
进度条
Progress正在下载更新68%
大约还需要一分钟
文字动效
Text Shimmer正在生成代码…
适用于加载状态
全部组件
按分类罗列的 62 个组件，点击任意一项查看示例、属性与源码。
通用
General7导航
Navigation2数据录入
Data Entry12- 多选框Checkbox支持选中、未选中与不确定状态的多选控件。
- 颜色选择器Color Picker面向设计 Token 的 OKLCH 颜色选择器，支持感知色彩通道、透明度和精确 CSS 值。
- 输入框Input支持前后内容、浮动标签、下划线和错误态的输入框。
- 单选框Radio Group用于互斥选项的轻量单选控件组。
- 下拉框Select带景深入场、分组与键盘导航的选项选择器。
- Cascader用于浏览和选择层级值的多列选择器。
- Form可组合的表单字段，协调标签、校验提示与动效反馈。
- 日期选择器Date Picker在紧凑弹层中选择、格式化和清除日期。
- 滑动输入Slider悬浮时展开轨道、数值标签实时跟随的可调输入控件。
- 开关Switch带弹簧滑块与完整无障碍语义的二元状态控件。
- 时间选择器Time Picker用小时、分钟与时制分栏快速设定时间。
- 上传Upload支持点击选择、拖拽放置与上传状态反馈的文件上传组件。
数据展示
Data Display12- 气泡Bubble可组合头像、署名、正文、时间与操作区的通用消息气泡。
- 日历Calendar用可访问的月视图浏览并选择单个日期。
- 卡片Card将同一主题的内容、状态与操作组织在一个清晰的表面中。
- 描述列表Descriptions以清晰的键值结构展示对象、记录与档案信息。
- 空状态Empty State在没有数据或结果时解释现状并引导下一步。
- 图片预览Image Preview点击缩略图进入沉浸式大图预览，并提供缩放、旋转与下载操作。
- 看板Kanban用可组合列和原生拖放组织任务流转。
- 进度条Progress细腻、克制并支持确定与不确定状态的进度指示器。
- 骨架屏Skeleton在内容加载期间维持页面结构，降低布局跳动与等待的不确定感。
- 表格Table用原生表格语义组织和比较结构化数据。
- 时间轴Timeline以清晰的时间顺序展示事件、状态与说明。
- 水印Watermark在内容区域上方添加重复的文字水印。
反馈
Feedback6智能组件
AI7- AI 输入框AI Prompt支持提及、模型选择、附件、引用和可选能力的组合式 AI 输入框。
- AI 对话AI Chat可组合的 AI 消息、滚动容器与提示输入框。
- AI 对话时间线AI Conversation Timeline用紧凑刻度浏览长对话，悬停预览并快速定位到指定轮次。
- AI 工具调用AI Tool展示 AI 工具的执行状态、参数、结果与错误。
- AI 任务清单AI Todo展示 Agent 计划、执行进度与任务说明。
- AI 流式文本AI Stream可用于普通回答与思考过程的通用流式文本动效。
- AI 推理过程AI Reasoning流式展示模型返回的 reasoning 文本，并在生成期间自动展开。
动效
Motion7文字动效
Text Effects7数字动效
Number Effects1效果组件
Fancy1几分钟就能装进你的项目
先跑一次 init 生成 wui.json 与主题 token，之后按需 add 组件即可。
pnpm dlx wui@latest init