# @crisp-ui-kit/crisp 中文文档

规范地址：https://npmcn.com/package/%40crisp-ui-kit/crisp/

版本：0\.74\.1
npm 元数据更新时间：2026-11-08T05:38:41.670Z
中文译文更新时间：2026-11-11T00:49:15.395Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40crisp-ui-kit/crisp
原文对照：https://npmcn.com/package/%40crisp-ui-kit/crisp/?lang=original
项目主页：https://github.com/your-moon/crisp#readme
源码仓库：https://github.com/your-moon/crisp

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：7.1 MB，1582 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：14 个
- peer 依赖：katex \>=0\.16，react \>=18，mermaid \>=11，react-dom \>=18
- 首次发布：2026-09-06T09:42:35.540Z
- 最新版本发布：2026-11-08T05:38:41.503Z
- 近 30 天下载量：4568（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：167（近 12 个月 167 个）

## 中文简介

一个精益反射设计系统,从Attio测出像素为像素.

## 安装

```sh
npm install @crisp-ui-kit/crisp
```

也可以使用：`pnpm add @crisp-ui-kit/crisp`、`yarn add @crisp-ui-kit/crisp`、`bun add @crisp-ui-kit/crisp`

## README

# 简洁

精细反应设计系统, **测量到像素的像素 [阿提欧](https://attio.com/)**。 。 。 . 每一个组件的相距,半径,阴影, 和运动被读取 从活的应用程序 复制了逐字记录——然后用分镜检查来保护它,使其不能漂移.

-   **60+组件** ——原始人(按钮、输入、选择、菜单、对话框、表.)和 产品表面(记录表,董事会,命令,ListPage,RichText编辑器...).
-   **设计符号** 小型语义尺度(`space`, (中文(简体) ), `radius`, (中文(简体) ), `text`颜色) 自动取光/暗地取光.
-   **类型** ——每个组件和变体的完整TypeScript类型.
-   **路西德图标**, (中文(简体) ), **CSS 可变主题**零运行时间 CSS-in-JS.

## 安装

```sh
npm install @crisp-ui-kit/crisp
# or: bun add @crisp-ui-kit/crisp
```

反应 18+ 是同级依赖:

```sh
npm install react react-dom
```

简洁的船 **无害环境管理和共同JS**,所以两者 `import` 财务报告和审定财务报表 `require` 工作时 每个 组件还拥有自己的子路径,这就是保持一个组件的导入 小型( 单身) `Badge` 捆绑到~8 KB :

```tsx
import { Badge } from "@crisp-ui-kit/crisp";      // barrel — tree-shakes
import { Menu } from "@crisp-ui-kit/crisp/menu";  // or import it directly
```

## 使用量

导入样式表 **一次** 在应用程序根,然后在任何地方使用组件:

```tsx
// app entry (main.tsx / layout.tsx)
import "@crisp-ui-kit/crisp/base.css"; // optional app baseline
import "@crisp-ui-kit/crisp/styles.css";
```

如果你的风格需要击败脆饼,请导入 `@crisp-ui-kit/crisp/styles.layered.css` 改为 `styles.css`它是相同的 CSS 包裹 `@layer crisp-components`和任何东西 在一层外写字 胜过层内的任何东西 不管具体或顺序.

`base.css` 是可选的: 它设置 `body`字体、背景和文字颜色 脆饼本身的代币(外加箱尺寸和 `color-scheme`),所以新鲜的应用程序不会 将时代新罗马化为透明背景。 先导入,再导入 `styles.css`。 。 。 .

`styles.css` 已包含设计符号,因此一个导入即可. `@crisp-ui-kit/crisp/tokens.css` 难得的情况 想要的标志 **无** 组件样式——主题 另一个库 比如从脆脆的调色板上.

```tsx
import { Button, Badge, EmptyState } from "@crisp-ui-kit/crisp";

export function Example() {
  return (
    <div>
      <Button intent="primary">Save changes</Button>
      <Badge tone="success" dot>
        Live
      </Badge>
      <EmptyState
        variant="page"
        title="No records yet"
        description="Create your first record to get started."
        action={<Button intent="primary" size="sm">New record</Button>}
      />
    </div>
  );
}
```

### 他们

颜色和符号是CSS变量. 通过设置切换暗模式 `data-theme="dark"` (或 `class="dark"`)在母元素上;每个组件都随之而来。 访问原始符号 在联署材料中通过出口 `contract`数字 :

```tsx
import { contract as c } from "@crisp-ui-kit/crisp";

const styles = { padding: c.space["4"], borderRadius: c.radius.md };
```

### 构建自己的组件

套装上同样原始的被输出(`defineRecipe`, (中文(简体) ), `resolveRecipe`, (中文(简体) ), `Primitive`) 这样您就可以以相同的风格编写组件 .

对于新组件,偏好 **`defineSpec`**: 它的造型与 _数据_ ——命名槽 - 而不是作为CSS字符串,以及 `specToRecipe` 编译到 配方 其他的都已经理解.

```tsx
import { defineSpec, resolveRecipe, specToRecipe, contract as c } from "@crisp-ui-kit/crisp";

const spec = defineSpec({
  name: "callout-lite",
  base: { display: "flex", gap: c.space["2"], borderRadius: c.radius.md },
  parts: [{ slot: "icon", selector: "& .icon", decls: { flexShrink: 0 } }],
  variants: {
    tone: {
      neutral: { background: c.bgRaised, color: c.fgMuted },
      danger: { background: c.bgDanger, color: c.fgOnTone },
    },
  },
  defaultVariants: { tone: "neutral" },
});

export const calloutLite = resolveRecipe(specToRecipe(spec));
```

变种键存活到类型,所以 `VariantProps<typeof calloutLite>["tone"]` 实值 `"neutral" | "danger"` 没有 `string`弦乐谱只能被重写并寄予希望; 光谱可以是 _读取_,这就是让非CSS目标拒绝其无法表达的财产 而不是无声地放弃它。 克洛克的原始人正逐个向它移动.

## 文档

文档网站为每个组件制作一个实时、量度演示。 本地运行 :

```sh
cd docs && bun run dev   # http://localhost:3000
```

## 贷项

{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}他的工作是别人的.

**[Seed 设计](https://github.com/daangn/seed-design)** 译者:, 阿帕奇2.0 (英语). 七号 `@seed-design/*` 软件包驱动 Cript's DatePicker, TimePicker, sliper, 数量 Picker, FileUpload and MiddleTruncate, 以及这些组件的几何—— 加上 WheelPicker, 字段焦点环和几个中性符号值—— 读取自 `@seed-design/css` 并重塑了舒克的象征角色。 薄薄的分层 多平台的作品如下: [ADR 0002 (韩语)](https://npmcn.com/package/%40crisp-ui-kit/crisp/docs/adr/0002-cross-platform-boundary.md)。 。 。 . 每个衍生文件都记录了所带走的和改变的;全部归属,包括 SEED Design本身的通知,在 [通知](https://npmcn.com/package/%40crisp-ui-kit/crisp/NOTICE)。 。 。 .

**[半径](https://www.radix-ui.com/) 编剧和编剧** (MIT)用于 `asChild`, (中文(简体) ), **[扎格语Name](https://zagjs.com/)** (麻省理工学院) 为组合盒和对话框状态机器, **[卢西德](https://lucide.dev/)** 每一个图标,和 **clsx 数据** (麻省理工学院).

简洁不附属于其中任何一个国家,也不由其赞助或认可.

## 许可证

[麻省理工学院](https://npmcn.com/package/%40crisp-ui-kit/crisp/LICENSE) 蒙克顿

舒克自己的密码是麻省理工学院 它包括Apache许可证2.0下的作品——见: [通知](https://npmcn.com/package/%40crisp-ui-kit/crisp/NOTICE) 财务报告和审定财务报表 [许可证/Apache-2.0.txt](https://npmcn.com/package/%40crisp-ui-kit/crisp/licenses/Apache-2.0.txt)。 。 。 .

## 常见问题

### @crisp-ui-kit/crisp 是什么？

一个精益反射设计系统,从Attio测出像素为像素\.

### 如何安装 @crisp-ui-kit/crisp？

在项目目录运行 npm install @crisp-ui-kit/crisp，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）、react-dom（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @crisp-ui-kit/crisp 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @crisp-ui-kit/crisp 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @crisp-ui-kit/crisp 可以商用吗？

@crisp-ui-kit/crisp 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @crisp-ui-kit/crisp 的下载量有多少？

根据 npm 官方下载统计，@crisp-ui-kit/crisp 在 2026/10/11 – 2026/11/09 这 30 天内被下载 4,568 次，日均约 152 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @crisp-ui-kit/crisp 还在维护吗？

最新版本 0\.74\.1 发布于 2026/11/08（2 天前）；至今共发布 167 个版本，其中过去 12 个月发布了 167 个；首次发布于 2026/09/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。