Yi UI

简介

Yi UI 是一个以 shadcn registry 形式发布的组件库，由 Travins 个人维护，官网是 yiui.dev。组件不打成 npm 包，而是用 shadcn CLI 把源码复制进你的项目，样式、结构、交互都可以直接改。

名字取自站点标志「易」（三道细斜杠是「日」，三道粗斜杠是「勿」）：既是「容易上手」，也是「随你改动」。

Yi UI 面向中文产品：文档用简体中文写，组件的默认文案（按钮、提示、读屏标签）是中文，排版按中文系统字体栈调过，装进中文项目基本不用再改文案。

视觉上统一使用「线条网格」语言：全宽横线、竖线容器、点阵分隔带，配合细边框、小圆角与克制的动效。

特点

• 源码归你 —— 通过 shadcn CLI 安装，组件、依赖的其他条目、需要的 CSS 变量会一并写入项目。
• Base UI 底座 —— 交互原语基于 Base UI，键盘操作、焦点管理与读屏语义开箱即用。
• 跟随主题 —— 所有颜色都取自主题变量：亮 / 暗模式加 14 套颜色主题，切换时组件自动变色。
• 方条控件系列 —— 数值滑块、分段选择、开关、色调、角度、二维拖拽板共用一套高度与外观，可以拼成参数面板，并一键把当前参数复制为 JSX；金额、手机号、证件号、数量、省市区这些中文表单控件也用同一套外观。
• 网格化的表格周边 —— 网格工具栏把搜索、筛选、列设置排成一行格子，方条控件放进去自动去掉外框；网格分页贴在表格底部，翻页时数字滚动、当前页色块滑动，整条不抖动。
• 手机上好用 —— 触屏设备上按钮与输入框自动加高一档（36 / 40 / 44px），拖拽类控件能区分滚动和拖动，数字输入调起数字键盘；每个示例都能扫码在手机上单独打开体验。
• 动效有分寸 —— 进入视口才播放、离屏自动暂停、尊重「减少动态效果」。
• 预渲染友好 —— 页面在构建时全部预渲染；依赖测量或画布的组件在脚本加载前渲染同尺寸占位，不会出现空白或布局跳动。
• 对 AI 友好 —— 用 npx skills add Travins/yi-ui --skill yi-ui 给 Agent 装上使用技能；每篇文档都有展开了示例和属性表的 Markdown 版本，并提供 llms.txt 与 llms-full.txt。

快速开始

需要 React 19、Tailwind CSS v4，以及选择了 Base UI 底座的 shadcn 项目。

# 新建项目（已有项目去掉 -t / -n 两个参数）
pnpm dlx shadcn@latest init -t next -b base -p nova -n my-app

# 安装任意组件
pnpm dlx shadcn@latest add @yiui/value-slider

Yi UI 已收录进 shadcn 官方 Registry 目录，@yiui 命名空间不用配置，CLI 会在第一次安装时自动把它写进 components.json。也可以用完整地址安装：

pnpm dlx shadcn@latest add https://yiui.dev/r/value-slider.json

完整说明（文件落点、依赖、样式写入与常见问题）见安装文档。

组件

分组	组件
图形与动效	等轴测标志 · 流程动画图示 · 点阵地球 · 字符矩阵 · 动态格 · 轨道环绕 · 波纹脉冲 · 代码文件堆叠
表单与输入	配色编辑器 · 颜色选择 · 方条文本框 · 方条下拉选择 · 数值滑块 · 控制面板 · 二维拖拽板 · 角度刻度尺 · 分段选择 · 方条开关 · 色调选择 · 金额输入 · 手机号输入 · 证件号输入 · 数量选择 · 步骤条 · 省市区选择 · 文件上传
数据展示	网格工具栏 · 网格分页 · · · ·

区块与页面

区块分三组，和网站上的分组一致。

This is the beginning of the README. Read the rest at the original. Read the full README ↗