Claude UI

简体中文 · English

复刻 claude.ai 设计系统的 React 组件库，基于 Radix 无样式基元与 Tailwind v4 构建。

→ 在线组件浏览页

色板是暖中性调（#f4f4f1 → #e2e1da → #a6a59b，通篇偏黄绿，接近未漂白的纸）；正文与标题 用 Lora 衬线体，代码与数据用 Geist Mono，两套字体均自托管、随包分发。样式走三层 token （primitives → system → theme → 工具类 → 组件），组件只用语义工具类、从不碰原始色值， 明暗两套色值自动翻转，无需为深色模式另写样式。

24 个组件：Alert、AlertDialog、Avatar、Badge、Button、Card、Collapsible、ConfirmDialog、 Dialog、DropdownMenu、Input、Label、Popover、ScrollArea、Select、Separator、Sidebar、 Skeleton、Switch、Textarea、Toast、Toaster、ToggleGroup、Tooltip。

安装

npm install @liuhanlin23/claude-ui

React 18+ 是 peer dependency。Tailwind v4 可选，见下。

使用

自带 Tailwind v4（推荐 —— 这样才能覆盖 token）：

/* 你的入口 css */
@import "@liuhanlin23/claude-ui/src/styles/globals.css";
@source "../node_modules/@liuhanlin23/claude-ui/src";

不用 Tailwind（预编译版，约 77 kB；字体按需从包内取用）：

import "@liuhanlin23/claude-ui/styles.css"

两种方式都这么用：

import { Button, Card, CardHeader, CardTitle, toast, Toaster } from "@liuhanlin23/claude-ui"

export function App() {
  return (
    <>
      <Card>
        <CardHeader>
          <CardTitle>你好</CardTitle>
        </CardHeader>
      </Card>
      <Button onClick={() => toast.info("已保存")}>保存</Button>
      <Toaster />
    </>
  )
}

暗色由 :root 上的 data-mode="dark" 驱动；什么都不设时跟随 prefers-color-scheme。

定制 token

改哪一层取决于你要动什么 —— 完整架构见 src/styles/README.md。

要改什么	改哪
某个原始色值	primitives.css
新增语义 token	system.css（明暗两套）且 theme.css（接到 --color-*），缺一不生效
某个组件自己的 token	system.css 的设计 token 区

开发

npm install
npm run gallery:dev     # 组件浏览页，热更新
npm run gallery:build   # → gallery/gallery.html，自包含单文件
npm run build           # → dist/（ESM + .d.ts + 预编译 css）
npm run typecheck

组件浏览页既是开发环境，也是上面那个在线预览的产出源头。

许可

MIT。随包分发的字体（Lora、Geist Mono）采用 SIL Open Font License 1.1， 见 src/assets/fonts/LICENSE.md。