# @codelitdev/design-system 中文文档

规范地址：https://npmcn.com/package/%40codelitdev/design-system/

版本：0\.8\.2
npm 元数据更新时间：2026-11-09T11:09:38.491Z
中文译文更新时间：2026-11-10T07:06:57.909Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40codelitdev/design-system
原文对照：https://npmcn.com/package/%40codelitdev/design-system/?lang=original
项目主页：https://github.com/codelitdev/platform/tree/main/packages/design-system#readme
源码仓库：https://github.com/codelitdev/platform

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

- 包体积（解压后）：67.4 kB，46 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18，react-dom \>=18
- 首次发布：2026-07-24T21:01:09.993Z
- 最新版本发布：2026-11-09T11:09:37.867Z
- 近 30 天下载量：2942（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 19 个）

## 中文简介

共享代码Lit设计令牌,Tailwind预设,以及CourseLit,MediaLit,SendLit和FrontLit的回放原始.

## 安装

```sh
npm install @codelitdev/design-system
```

也可以使用：`pnpm add @codelitdev/design-system`、`yarn add @codelitdev/design-system`、`bun add @codelitdev/design-system`

## README

# @ codelitdev/ 设计系统

共享的指使,Tailwind预设,以及CourseLit,MediaLit,SendLit和FrontLit的回放原始.

这个 **符号 + 尾风预置是产品**; 反应组件为 参考/倒置(见第5步)。 消费应用通常只使用 CSS 和 预设并保留自己的阴影组件.

## 安装

发布至npm作为公共软件包. 目前放行是预放行 下划线 `alpha` dis.

> \[尖叫声\] **`latest` 目前也点数 `0.1.0-alpha.0`。 。 。 .** npm 总是设置 `latest` 一个软件包的首次发布,无论 `--tag` 这是 直到一个真正稳定的版本被剪去,在何时发布 移动 `latest` 自动前进。 在此之前, **总是把准确的 版本** - 别 `bun add @codelitdev/design-system` 赤裸的,绝不然 使用护栏/护栏范围(`^0.1.0-alpha.0` 仍然决心 预放,至少是明确的——但赤裸的安装没有版本 默默地表示"无论 `latest` 是",现在就是这个α。".

```sh
bun add @codelitdev/design-system@0.1.0-alpha.6
```

平台示例将软件包消耗为 `workspace:*`. 产品储存库 使用准确的出版版本.

## 在阴影应用程序中使用

1.  一次导入符号层, 如 : `app/globals.css`数字 :

```css
@import "@codelitdev/design-system/styles.css";
```

替换默认阴影 `:root`编号 :`.dark` 块 —— 变量名称匹配, 因此现有的shadcn 组件不需要更改代码 .

2.  扩展您的尾风配置 :

```js
// tailwind.config.js
const codelitPreset = require("@codelitdev/design-system/tailwind-preset");
module.exports = {
  presets: [codelitPreset],
  content: [...],
};
```

3.  产品范围 **`<html>`** 元素( 非) `<body>`:

```tsx
<html data-product="sendlit">  {/* courselit | medialit | sendlit | frontlit, omit for CodeLit amber */}
```

> \[大 打开 `data-product` 打开 `<html>`没有 `<body>`。产品范围仅覆盖 `--primary`编号 :`--ring`; 任何代名词 `:root` 参考文献 `--primary` (例如:shadcn's `--sidebar-primary: var(--primary)`决定 `var()` **地点 声明元素**。如果重置时 `<body>` 儿童人数 `:root`),这些 `:root` 化名会被冻到琥珀底部 永远不要捡起产品口音 - 直接时 `bg-primary` 公用事业仍然变绿色,造成混乱分化.

4.  字体: 通过 Hanken Grotesk + Spline Sans Mono 装入 `next/font/google` (或您框架的字体加载器),映射到 `--font-sans` 编号 : `--font-mono`。 。 。 .
    
5.  **部件——从阴影登记册安装** (见 [构成部分](https://npmcn.com/package/%40codelitdev/design-system/#readme-components-shadcn-registry) 页:1 这些是真实的 shadcn/Radix 组件 样式到设计系统, 所以您的应用程序的按钮/ 节点/ 卡 _为:_ dS's——没有手接. 简单反应 `src/components/` 类别(`components.css`仅作为视觉参考.
    
6.  Logos : `@codelitdev/design-system/assets/logo-<product>.svg`。 。 。 .
    
7.  装入器(Laugers) ——取自"logo"自旋器,而非静态资产:
    

```tsx
import { Loader } from "@codelitdev/design-system";
<Loader product="sendlit" size={32} />
```

显示在 `currentColor`,与图标组件相同——将其(或祖先)包裹入 任何设置的颜色你想要的,例如. `className="text-primary"` 对于产品口音.

## 部件(阴影登记册)

设计系统将部件作为 **阴影登记册** 所以每个产品 安装 _不变_ 样式组件(按钮、徽章、牌等,.)通过阴影 CLI – 将所有四个应用程序都保留在一个组件层上,而不是每个组件层重刻其 拥有的。 它们是标准的Shadcn/Radix组件;它们从DS取出它们的外观 标志,所以确保 `@codelitdev/design-system/styles.css` 输入(以上).

在您的应用程序中添加注册名称空间 `components.json`数字 :

```jsonc
{
  "registries": {
    "@codelit": "https://raw.githubusercontent.com/codelitdev/platform/main/packages/design-system/public/r/{name}.json"
  }
}
```

然后像其它阴影组件一样安装组件 :

```sh
bunx shadcn@latest add @codelit/button @codelit/badge @codelit/card
```

或者直接通过 URL 安装单个组件, 没有配置 :

```sh
bunx shadcn@latest add https://raw.githubusercontent.com/codelitdev/platform/main/packages/design-system/public/r/button.json
```

### 可用组件

| 构成部分 | 页:1 |
| --- | --- |
| `button` | `primary` 编号 : `secondary` 编号 : `outline` 编号 : `ghost` 编号 : **`soft`** 编号 : `destructive`· ; `sm` `md` `lg` (30/36/42px) (中文(简体) ) |
| `icon-button` | 仅限平方图标; `ghost` 编号 : `outline`· ; `sm` `md` |
| `badge` | `default` 编号 : `neutral` 编号 : `success` 编号 : `warning` 编号 : `destructive` 编号 : `outline`· ; `dot` 道具 |
| `card` | \+ 键 `CardHeader` `CardTitle` `CardDescription` `CardContent` `CardFooter` |
| `input` | 洗铜器的焦点戒指; `aria-invalid` - 破坏性 |
| `textarea` | 多行形式 `input` |
| `label` | 13px 半粗体字段标签 |
| `checkbox` | 18px, 5px半径, 检查时重音填充 |
| `radio-group` | \+ 键 `RadioGroupItem` |
| `switch` | 36x21 轨道, 打开时重音 |
| `select` | 触发匹配 `input`; 符号式弹出 |
| `tabs` | 已分割; 主动触发升起到卡片表面 |
| `dialog` | 半径为 16px; 完整的 Radix 部件 |
| `dropdown-menu` | 匹配 `select`' popover 处理; 完整的 Radix 部件, 包括 checkbox/ radio 项和子菜单 |
| `tooltip` | 暗芯片; 暗芯片 ; `TooltipProvider` 包含 |
| `toast` | 演示名片( E)`default`编号 :`success`编号 :`destructive`)——用自己排队驾驶 |

立即安装所有设备 :

```sh
bunx shadcn@latest add @codelit/button @codelit/icon-button @codelit/badge @codelit/card \
  @codelit/input @codelit/textarea @codelit/label @codelit/checkbox @codelit/radio-group \
  @codelit/switch @codelit/select @codelit/tabs @codelit/dialog @codelit/dropdown-menu \
  @codelit/tooltip @codelit/toast
```

**维护者 :** 组件来源 `registry/codelit/ui/`更改后 一,重建服务 JSON与 `bun run registry:build` (-) `public/r/*.json`和 承诺——原始-URL安装为那些已承诺的文件服务.

## 出版

释放在下面 `alpha` 这么平平 `bun add` 永远不要抓 一个 通过更改器驱动平台根释放;不运行 `bun publish` 从此软件包目录 :

```sh
bun run changeset
bun run release:alpha
```

校验 : `bun info @codelitdev/design-system --json` 应显示 提前释放 `alpha` 离开 `latest` 无所未有.

## 许可证

阿帕奇-2.0 — 见 [自由主义](https://npmcn.com/package/%40codelitdev/design-system/LICENSE)。 。 。 .

## 常见问题

### @codelitdev/design-system 是什么？

共享代码Lit设计令牌,Tailwind预设,以及CourseLit,MediaLit,SendLit和FrontLit的回放原始\.

### 如何安装 @codelitdev/design-system？

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

### @codelitdev/design-system 支持 TypeScript 吗？

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

### @codelitdev/design-system 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @codelitdev/design-system 可以商用吗？

@codelitdev/design-system 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @codelitdev/design-system 的下载量有多少？

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

### @codelitdev/design-system 还在维护吗？

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