按钮与状态 触发动作、告诉用户「在跑」

FlowButton flowbtn

悬停时圆形色块自中心扩散铺满,左箭头滑入、右箭头滑出,文字右移让位,胶囊收成圆角矩形。把鼠标移上去看。

LoadingState loadst

3×3 像素网格 + 流光标签 + 等宽实时计时。适合 10 秒以上的长任务:转圈只说明「在跑」,这个还回答「跑了多久」。

Drive
Dots
Orbit

筛选与选择 都是持有值的控件,看板工具栏三件套

SlideTabs slidetabs

滑块在标签之间移动:悬停先滑过去「预演」,点击才真正切换,移出容器自动归位。做切片器 / 分段控件 / 视图切换。方向键也能切。

全部
含禁用项 · 铺不下时可横滑

SelectBox selectbox

下拉框(持有值的那种):选中项打勾并高亮,选项 ≥12 个自动出搜索框,首字母连打可跳转。第二个是由原生 <select> 升级来的——没 JS 时它就是个能用的下拉框,升级后仍能正常提交表单。

en · cn

DateFilter datefilter

日期筛选:日期区间(双月并排)与单日两种模式,左侧快捷区间(本月、近 30 天、本季度…)。方向键可逐日移动,PageUp/Down 翻月。

未选

菜单与导航 点了就走 / 点了就执行,不留值

DropMenu dropmenu

毛玻璃下拉菜单:面板模糊淡入 + 缩放,条目逐条错峰滑入,箭头翻转 180°。面板挂在 body 下、fixed 定位,不会被工具栏的 overflow 裁掉;放不下会自动翻边。要保存选中值请用 SelectBox。

未选

MenuVertical menuvert

竖排大字导航:悬停时箭头自左侧滑入、文字右移让位并变色,可选斜切。动效全在 CSS 的 :hover / :focus-visible 上,用 Tab 键也能看到。

Dock dock

macOS 式放大坞:鼠标靠近时图标按距离连续放大,弹簧收敛,悬停冒出标签气泡。方向键也能走,聚焦项同样会放大。

流程图 自成一套板岩配色,不吃 --uik-accent

FlowDiagram flowdia

系统图 / 流程图:泳道 + 按语义分色的节点 + 正交连线。把鼠标移到节点上看聚焦。位置由你给的 (lane, col) 决定,它不做自动布局。
五套皮:slate 提炼自 archify(MIT), flat / terminal / blueprint / notion 提炼自 fireworks-tech-graph(MIT)的风格指南 1/2/3/4。换皮只改令牌,走线与交互不动。

slate · archify

使用方法

点卡片上的「复制源代码」,该组件的自包含代码(CSS + JS)就进了剪贴板。直接发给 agent,同时说:

「要用该素材修改哪个组件,或用于做什么组件,可自行在此基础上再自定义修改。」

改配色
每个颜色都写成 var(--uik-xxx, 默认值),覆盖令牌即可全局换色; 暗色跟随系统,也可给根元素加 data-uik-theme="dark" 手动切。

新增组件
components/<名字>/ 下放同名 css/js,把目录名加进 build.pyCOMPONENTS,跑一次 python build.py,再到本页加卡片与左侧目录项。详见 README.md。