跳至正文

Introduction介绍

一套线条网格风格的 React 组件、区块与页面模板,源码开放,用 shadcn CLI 复制进你的项目。

Yi UI(易)是本站维护的开源组件库,名字取自站点标志「易」:既是「容易上手」,也是「随你改动」。它按 shadcn 方式分发:库本身不是 npm 包,每个条目都是一份源码,由 shadcn CLI 写进你的项目,之后完全属于你。视觉上围绕「线条网格」展开:内容区两侧的竖线、贯穿屏幕的横线、点阵与刻度尺分隔带。

与 shadcn 的关系

本站遵循 shadcn 的 Registry 规范,条目的 JSON 格式、安装命令与 CLI 行为都与官方一致。组件基于 shadcn/ui 的 base-nova 风格(Base UI 底座),使用 Tailwind CSS v4 与主题变量,所以能直接放进已初始化 shadcn 的项目,并跟随你的亮暗模式与颜色主题。

这里的内容是对官方组件的补充,不替代它们:按钮、对话框等通用原语继续使用 shadcn 官方组件。

内容分层

层级说明registry 类型
组件单一职责的小部件,如线条网格布局、本地时间、时段问候registry:ui
区块可直接放进页面的整块界面,如登录、聊天、特性分栏registry:block
模板整页风格模板,改一个配置文件就能换成自己的内容registry:page
主题14 套颜色主题,亮暗模式独立切换registry:theme

大层级可以依赖小层级:区块由组件组合而成,模板由区块与组件组成。安装时 CLI 会自动带上这些依赖。

如何使用

  1. 在项目里初始化 shadcn,见安装。
  2. 选一个条目,运行文档页顶部给出的安装命令。
  3. 打开写入项目的源码,按需修改。

如果想少打几个字,或让 AI 编辑器直接检索这里的组件,可以继续阅读 Registry 与命名空间 与 AI 与 llms.txt。