# Yi UI

> 为中文界面打磨的线条网格 React 组件库，由 Travins 个人维护。基于 Next.js 静态导出，提供可复制的 React 组件源码、中文文档与实践文章。

组件库名为 Yi UI，采用 React、Tailwind CSS v4 与 shadcn/ui（Base UI）。所有链接使用站点正式域名；全文原始 MDX 见下方链接。

安装：先在目标项目初始化 shadcn，再运行 `pnpm dlx shadcn@latest add https://yiui.dev/r/<name>.json`。也可在 components.json 的 registries 中配置 `"@yiui": "https://yiui.dev/r/{name}.json"`，然后运行 `pnpm dlx shadcn@latest add @yiui/<name>`。

## 组件

- [grid-layout](https://yiui.dev/components/grid-layout/): 带全宽横线、竖线容器、刻度尺等多种纹路分隔带和交点十字的响应式布局原语。 Registry JSON: [grid-layout.json](https://yiui.dev/r/grid-layout.json)

- [local-time](https://yiui.dev/components/local-time/): 按指定 IANA 时区显示实时时间：行内时间可带 UTC 偏移、昼夜图标与同访客的时差；另提供世界时钟（列表 / 卡片）和平滑转动的 SVG 模拟表盘。 Registry JSON: [local-time.json](https://yiui.dev/r/local-time.json)

- [greeting](https://yiui.dev/components/greeting/): 按访客本地时间问候：时段图标与色调、可配置的分段时间与称呼；附带四时段指示条和会轮换副标题的问候卡片，首屏用静态文案避免水合差异。 Registry JSON: [greeting.json](https://yiui.dev/r/greeting.json)

- [isometric-mark](https://yiui.dev/components/isometric-mark/): 把任意平面多边形挤出成等轴测线条 3D，带斜纹顶面、跟随鼠标的线条高光与点击按下效果。 Registry JSON: [isometric-mark.json](https://yiui.dev/r/isometric-mark.json)

- [flow-diagram](https://yiui.dev/components/flow-diagram/): 节点、细线与流动光点组成的循环动画流程图：统一时间轴、进入视口才播放、减少动态效果时停在静帧；色调与底纹可配置，附带光点路径、逐字输入、加载圈与状态点等原语。 Registry JSON: [flow-diagram.json](https://yiui.dev/r/flow-diagram.json)

- [stat-card](https://yiui.dev/components/stat-card/): 一组可组合的统计卡片原语：KPI 数字与涨跌幅（绿涨红跌 / 红涨绿跌可切换）、目标状态行、配额进度条、分格计量条、延迟分区表、占比分布条与图例，数字默认按万 / 亿压缩。 Registry JSON: [stat-card.json](https://yiui.dev/r/stat-card.json)

- [mini-chart](https://yiui.dev/components/mini-chart/): 放进卡片的极简图表：柱、折线、面积、阶梯线、进度环与环形图。无网格无纵轴，可选 11px 横轴，涨跌色随配色约定变化，尊重「减少动态效果」。 Registry JSON: [mini-chart.json](https://yiui.dev/r/mini-chart.json)

- [chart-card](https://yiui.dev/components/chart-card/): 图表卡片布局（标题、指标行、图例、明细表）加三个图表：刻度式环形仪表、多序列折线 / 柱 / 面积图（支持堆叠与正负对比）、横向排名条。基于 shadcn chart，颜色全部取自主题变量。 Registry JSON: [chart-card.json](https://yiui.dev/r/chart-card.json)

- [orbit](https://yiui.dev/components/orbit/): 可组合的同心轨道与正向节点，支持半弧、反向运行与离屏暂停。 Registry JSON: [orbit.json](https://yiui.dev/r/orbit.json)

- [ripple](https://yiui.dev/components/ripple/): 同心波纹与径向标记，支持扩散脉冲、覆盖范围与离屏暂停。 Registry JSON: [ripple.json](https://yiui.dev/r/ripple.json)

- [value-slider](https://yiui.dev/components/value-slider/): 带标签与读数的数值滑块，支持区间、缓冲进度、刻度磁吸、数值格式化与拖出两端的弹性过冲。 Registry JSON: [value-slider.json](https://yiui.dev/r/value-slider.json)

- [segmented-control](https://yiui.dev/components/segmented-control/): 方条样式的互斥选项组，选中块在选项间滑动，可带图标或小样，与数值滑块同一套高度。 Registry JSON: [segmented-control.json](https://yiui.dev/r/segmented-control.json)

- [toggle-switch](https://yiui.dev/components/toggle-switch/): 整条可点的开关，打开时铺上淡色、圆形手柄滑到右端，与数值滑块同一套高度。 Registry JSON: [toggle-switch.json](https://yiui.dev/r/toggle-switch.json)

- [tone-picker](https://yiui.dev/components/tone-picker/): 方条左侧标签、右侧一排色点的单选组，色点取主题变量，跟随亮暗与颜色主题。 Registry JSON: [tone-picker.json](https://yiui.dev/r/tone-picker.json)

- [angle-dial](https://yiui.dev/components/angle-dial/): 方条样式的角度输入：左右拖动刻度、中间竖线指针读数，满一圈首尾相接，与数值滑块同一套高度。 Registry JSON: [angle-dial.json](https://yiui.dev/r/angle-dial.json)

- [xy-pad](https://yiui.dev/components/xy-pad/): 一块带网格的区域，拖动手柄同时调两个值，十字线与淡色填充标出位置，键盘左右 / 上下分别调两条轴。 Registry JSON: [xy-pad.json](https://yiui.dev/r/xy-pad.json)

- [control-panel](https://yiui.dev/components/control-panel/): 承载方条控件的面板容器：标题栏、分组网格、恢复按钮，以及把当前参数复制为 JSX 的按钮。 Registry JSON: [control-panel.json](https://yiui.dev/r/control-panel.json)

- [timeline](https://yiui.dev/components/timeline/): 可组合的时间线原语，支持经历、活动流、项目进度、水平路线图与交替更新日志。 Registry JSON: [timeline.json](https://yiui.dev/r/timeline.json)

- [card-stack](https://yiui.dev/components/card-stack/): 细边框卡片的层叠轮播，支持自动轮换、拖拽、键盘切换与减少动态效果。 Registry JSON: [card-stack.json](https://yiui.dev/r/card-stack.json)

- [globe](https://yiui.dev/components/globe/): 用点阵绘制的 WebGL 地球，颜色跟随主题，支持城市标记、标签、弧线、拖拽旋转与离屏暂停。 Registry JSON: [globe.json](https://yiui.dev/r/globe.json)

- [checklist](https://yiui.dev/components/checklist/): 勾选时文字被手写感划线划掉的清单，支持受控与非受控、进度汇总、自动播放与紧凑尺寸。 Registry JSON: [checklist.json](https://yiui.dev/r/checklist.json)

- [shuffle-grid](https://yiui.dev/components/shuffle-grid/): 方格里的内容随机出现、换位、点亮，支持分类胶囊切换、首字母头像、纯色像素块与离屏暂停。 Registry JSON: [shuffle-grid.json](https://yiui.dev/r/shuffle-grid.json)

- [marquee](https://yiui.dev/components/marquee/): 纯 CSS 无缝跑马灯，支持四向滚动、恒定速度、渐隐与斜向丝带。 Registry JSON: [marquee.json](https://yiui.dev/r/marquee.json)

- [text-animate](https://yiui.dev/components/text-animate/): 关键词轮换、分字显现、乱码解码与高亮扫过，支持中文与渐进增强。 Registry JSON: [text-animate.json](https://yiui.dev/r/text-animate.json)

- [glyph-field](https://yiui.dev/components/glyph-field/): 由主题色字符组成的自适应画布背景，支持混合色调、渐隐遮罩、中心内容与离屏暂停。 Registry JSON: [glyph-field.json](https://yiui.dev/r/glyph-field.json)

- [code-stack](https://yiui.dev/components/code-stack/): 带行号与语法骨架的代码文件卡，支持扇形、级联、网格排列与悬停散开。 Registry JSON: [code-stack.json](https://yiui.dev/r/code-stack.json)

## 文档

- [AI 助手面板](https://yiui.dev/blocks/agent-chat-01/): 从企业监控平台提炼的 AI 助手：嵌入与浮动布局切换，紧凑的 Trace 展示分析摘要、工具调用与来源，回答里可带迷你图与进度环，内置流式演示。

- [分屏登录页](https://yiui.dev/blocks/auth-01/): 左侧品牌面板 + 右侧表单的分屏登录页：登录（密码 / 验证码）、注册（带强度条）、找回密码，zod 校验；品牌面板与表单控件直接用本站自己的组件拼成。

- [区块](https://yiui.dev/blocks/): 可直接放进页面的整块界面，在 iframe 里独立预览，一条命令安装。

- [设置页](https://yiui.dev/blocks/settings-01/): 用方条控件拼成的完整设置页：分区导航、实时预览、已修改计数、恢复默认与异步保存。

- [角度刻度尺](https://yiui.dev/components/angle-dial/): 方条样式的角度输入：左右拖动刻度、中间竖线指针读数，满一圈首尾相接，与数值滑块同一套高度。

- [卡片堆叠](https://yiui.dev/components/card-stack/): 细边框卡片的层叠轮播，支持自动轮换、拖拽、键盘切换与减少动态效果。

- [图表卡片](https://yiui.dev/components/chart-card/): 图表卡片布局（标题、指标行、图例、明细表）加三个图表：刻度式环形仪表、多序列折线 / 柱 / 面积图（支持堆叠与正负对比）、横向排名条。基于 shadcn chart，颜色全部取自主题变量。

- [手写清单](https://yiui.dev/components/checklist/): 勾选时文字被手写感划线划掉的清单，支持受控与非受控、进度汇总、自动播放与紧凑尺寸。

- [代码文件堆叠](https://yiui.dev/components/code-stack/): 带行号与语法骨架的代码文件卡，支持扇形、级联、网格排列与悬停散开。

- [控制面板](https://yiui.dev/components/control-panel/): 承载方条控件的面板容器：标题栏、分组网格、恢复按钮，以及把当前参数复制为 JSX 的按钮。

- [流程动画图示](https://yiui.dev/components/flow-diagram/): 节点、细线与流动光点组成的循环动画流程图：统一时间轴、进入视口才播放、减少动态效果时停在静帧；色调与底纹可配置，附带光点路径、逐字输入、加载圈与状态点等原语。

- [点阵地球](https://yiui.dev/components/globe/): 用点阵绘制的 WebGL 地球，颜色跟随主题，支持城市标记、标签、弧线、拖拽旋转与离屏暂停。

- [字符矩阵](https://yiui.dev/components/glyph-field/): 由主题色字符组成的自适应画布背景，支持混合色调、渐隐遮罩、中心内容与离屏暂停。

- [时段问候](https://yiui.dev/components/greeting/): 按访客本地时间问候：时段图标与色调、可配置的分段时间与称呼；附带四时段指示条和会轮换副标题的问候卡片，首屏用静态文案避免水合差异。

- [线条网格布局](https://yiui.dev/components/grid-layout/): 用全宽横线、竖线容器与点阵分隔带，为内容建立清晰的秩序。

- [组件](https://yiui.dev/components/): 从线条、留白与排版开始，构建属于自己的界面。源码开放，复制即用。

- [等轴测标志](https://yiui.dev/components/isometric-mark/): 把任意平面多边形挤出成等轴测线条 3D：多种顶面材质与地面、跟随鼠标的线条高光、点击按下与音效。

- [实时当地时间](https://yiui.dev/components/local-time/): 按指定 IANA 时区显示实时时间：行内时间可带 UTC 偏移、昼夜图标与同访客的时差；另提供世界时钟（列表 / 卡片）和平滑转动的 SVG 模拟表盘。

- [跑马灯](https://yiui.dev/components/marquee/): 纯 CSS 无缝跑马灯，支持四向滚动、恒定速度、渐隐与斜向丝带。

- [迷你图](https://yiui.dev/components/mini-chart/): 放进卡片的极简图表：柱、折线、面积、阶梯线、进度环与环形图。无网格无纵轴，可选 11px 横轴，涨跌色随配色约定变化，尊重「减少动态效果」。

- [轨道环绕](https://yiui.dev/components/orbit/): 可组合的同心轨道与正向节点，支持半弧、反向运行与离屏暂停。

- [波纹脉冲](https://yiui.dev/components/ripple/): 同心波纹与径向标记，支持扩散脉冲、覆盖范围与离屏暂停。

- [分段选择](https://yiui.dev/components/segmented-control/): 方条样式的互斥选项组，选中块在选项间滑动，可带图标或小样，与数值滑块同一套高度。

- [动态格](https://yiui.dev/components/shuffle-grid/): 方格里的内容随机出现、换位、点亮，支持分类胶囊切换、首字母头像、纯色像素块与离屏暂停。

- [统计卡片](https://yiui.dev/components/stat-card/): 一组可组合的统计卡片原语：KPI 数字与涨跌幅（绿涨红跌 / 红涨绿跌可切换）、目标状态行、配额进度条、分格计量条、延迟分区表、占比分布条与图例，数字默认按万 / 亿压缩。

- [文字动效](https://yiui.dev/components/text-animate/): 关键词轮换、分字显现、乱码解码与高亮扫过，支持中文与渐进增强。

- [时间线](https://yiui.dev/components/timeline/): 可组合的时间线原语，支持经历、活动流、项目进度、水平路线图与交替更新日志。

- [方条开关](https://yiui.dev/components/toggle-switch/): 整条可点的开关，打开时铺上淡色、圆形手柄滑到右端，与数值滑块同一套高度。

- [色调选择](https://yiui.dev/components/tone-picker/): 方条左侧标签、右侧一排色点的单选组，色点取主题变量，跟随亮暗与颜色主题。

- [数值滑块](https://yiui.dev/components/value-slider/): 带标签与读数的数值滑块，支持区间、缓冲进度、刻度磁吸、数值格式化与拖出两端的弹性过冲。

- [二维拖拽板](https://yiui.dev/components/xy-pad/): 一块带网格的区域，拖动手柄同时调两个值，十字线与淡色填充标出位置，键盘左右 / 上下分别调两条轴。

- [介绍](https://yiui.dev/docs/): 一套线条网格风格的 React 组件、区块与页面模板，源码开放，用 shadcn CLI 复制进你的项目。

- [安装](https://yiui.dev/docs/installation/): 前置条件、用 shadcn 初始化 Base UI 底座、安装第一个组件，以及安装后文件、依赖与样式落在哪里。

- [AI 与 llms.txt](https://yiui.dev/docs/llms/): 让 AI 编辑器与 Agent 读取本站文档，并通过 shadcn MCP 检索和安装组件。

- [Registry 与命名空间](https://yiui.dev/docs/registry/): 通过 URL 或 @yiui 命名空间安装条目，了解目录地址、各类条目与依赖关系。

- [主题定制](https://yiui.dev/docs/theming/): 主题变量如何控制颜色与线条，亮暗模式与颜色主题是两个独立维度。

- [企业控制台布局](https://yiui.dev/templates/app-shell-01/): 提炼自企业监控平台的控制台外壳：固定顶栏、可折叠一级导航、二级工作区侧栏、独立滚动主区域，窄屏变抽屉，并预留右侧 aside 插槽（可放 AI 助手面板）。

- [页面模板](https://yiui.dev/templates/): 整页风格模板：一条命令得到完整页面，只改一个配置文件就换成自己的内容。

## 博客

- [一套高度表，拼出一个控制面板](https://yiui.dev/blog/bar-controls/): 从一个数值滑块出发，把边框、圆角、填充、手柄和高度统一成“方条”，再用同一张高度表补齐开关、分段选择、色调选择，最后拼成控制面板、文档里的调整面板和首页的“调一调”。

- [一个人和几个 AI，做一套组件库](https://yiui.dev/blog/ai-agents-component-library/): 四天 197 个提交，组件、文档、区块和验收脚本都有。记下分工怎么定、任务说明怎么写、为什么验收必须独立，以及哪些事我留给主控自己做。

- [静态站真的需要 loading 吗](https://yiui.dev/blog/static-site-loading/): 我先断定组件文档页首屏是空的，打算把示例改成服务端渲染。原型实测推翻了这个判断，真正的问题出在站内跳转、图表测量和 iframe 上。

- [设计「易」：六根斜杠是怎么来的](https://yiui.dev/blog/logo-design/): 从一个字的上下结构出发，在打印的辅助线上用铅笔推演，再把手稿收成整数坐标、1:2 斜度的几何，最后做成跟随主题变色的组件和可以按下的等轴测 3D。

- [在 H20 上部署 DeepSeek-V4.1-Flash](https://yiui.dev/blog/deepseek-v41-flash-h20/): 一台 8 卡 H20 跑 DeepSeek-V4.1-Flash 的部署经验：上下文长度怎么定、为什么用 vLLM 而不是 SGLang、调参的结论、怎么压测，以及上线和回滚的思路。

## 其他资源

- [全部文档与博客原文](https://yiui.dev/llms-full.txt): 去除 frontmatter 的 MDX 全文。

- [安装](https://yiui.dev/docs/installation/): 初始化 shadcn 并安装第一个组件。

- [Registry 与命名空间](https://yiui.dev/docs/registry/): 用 URL 或 @yiui 命名空间安装组件。

- [主题](https://yiui.dev/themes/): 颜色主题。

- [RSS](https://yiui.dev/rss.xml): 博客订阅。