Ink UI
一套让人感到温暖的组件库。
- 2026.08.15
- 设计系统 · React 组件与动效
Ink UI 是一个基于 Base UI 基础组件构建、使用 Tailwind CSS v4 编写样式的 React 组件库。它最初是 flowingto 的内部组件库，后来被抽离出来开源。
整体设计围绕温暖与友好展开：以暖灰色和橙色为主要配色，并大量使用较大的圆角。它的目标是更具人情味、更容易让人亲近的界面，因此相比信息密集、数据量较大的后台或仪表盘，它更适合面向普通用户的消费级产品。
颜色
Ink UI 没有直接采用 Tailwind 默认的 stone 色板，而是手动调整了灰色，让它只比中性灰略暖，接近纸张的感觉。主色的橙色与辅助色的红色同样是手动挑选的，饱和度低于 Tailwind 的同名颜色。所有颜色都在 OKLCH 空间下扩展为色阶，以保证一致的视觉观感。
gray
orange
red
shadcn/ui 主要靠在基础色上叠加透明度来表达组件的不同状态，例如 hover:bg-primary/90。这种方式有两个限制：叠出来的颜色只能朝一个方向变化，无法做到浅色模式下 hover 变深、深色模式下 hover 变浅；hover 与 active 也无法各自定义独立的语义色。Ink UI 在 shadcn/ui 的 theme 之上，为 surface color 的不同状态补充了独立的 token，每个状态的颜色都能精确控制，基本覆盖了设计系统里的大部分交互场景。
--background
--card
--primary
--secondary
--accent
--destructive
这些状态色由基础色通过 color-mix 向 --foreground 混合得到，因此同一个公式在浅色模式下让 hover 变深，在深色模式下让 hover 变浅，切换主题即可看到差别。secondary 是例外：它本身是叠在背景上的半透明色，hover 与 active 通过提高透明度实现。
动效与细节
动效系统强调流畅、自然的过渡，并通过克制的微交互提升界面的精致感，同时避免分散用户对内容本身的注意力。例如：
- button 进入 loading 状态时的切换
- menu 中只有一个菜单项带图标时，文字会自动对齐
- menu / select trigger 在面板打开时保持 hover 状态
- scroll bar 在上部与右侧均留有间距