# @carsxe/design-system 中文文档

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

版本：0\.3\.8
npm 元数据更新时间：2026-10-15T14:35:55.776Z
中文译文更新时间：2026-11-09T04:54:18.485Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：4.2 MB，347 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：32 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0
- 首次发布：2026-08-19T14:50:31.217Z
- 最新版本发布：2026-10-15T14:35:54.946Z
- 近 30 天下载量：11646（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 22 个）

## 中文简介

\* Carsxe设计系统 \* shadcn/ui 组件以卡斯克思品牌为主.

## 安装

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

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

## README

# @ carsxe/ 设计系统

汽车设计系统 - [阴影/ ui](https://ui.shadcn.com/) 以卡斯克为主的部件 安装此软件包使船舶的UI一致; 不运行 `shadcn add` 在你的应用程序.

## 安装

```bash
npm install @carsxe/design-system
```

```bash
pnpm add @carsxe/design-system
```

```bash
bun add @carsxe/design-system
```

同伴依赖性 : `react` 财务报告和审定财务报表 `react-dom` (v19) (中文(简体) ).

## 装入 CSS

在您的应用程序条目附近导入主题一次 .

如果您的应用程序已经编译了 Tailwind v4 :

```ts
import "@carsxe/design-system/globals.css"

// This stylesheet does not bundle the fonts — import them so your bundler
// resolves and fingerprints the woff2 files itself.
import "@fontsource-variable/manrope"
import "@fontsource-variable/dm-sans"
import "@fontsource/dm-mono/300.css"
import "@fontsource/dm-mono/400.css"
import "@fontsource/dm-mono/500.css"
```

否则导入自成一体的预建样式表( fonts) 包括:

```ts
import "@carsxe/design-system/styles.css"
```

字体有:曼罗佩(UI,正文,输入),DM Sans(标题)和DM Mono(代码). 如果你换种方式装上它们.. `next/font`例如——点 `--font-sans`, (中文(简体) ), `--font-body`, (中文(简体) ), `--font-heading`,以及 `--font-mono` 在你的家人身边 输入上述包.

## 使用量

偏好每个组件导入路径 :

```tsx
import { Button } from "@carsxe/design-system/components/button"

export function Example() {
  return <Button>Get started</Button>
}
```

软件包根还可以工作:

```tsx
import { Button, Card, Input } from "@carsxe/design-system"
```

## 构成部分

手风琴、警报、Angle滑板、Avatar、徽章、Bradecrumb、按钮、卡片、, 复选框、剪贴板、取色器、日期输入、对话框、下放菜单、可编辑, 浮动面板、格式、高亮、图像剪接器、输入、JSON树视图、标签、, Listbox, Marquee, Mega 菜单,导航菜单, 数字输入, Pagenation, 密码输入, 进步 QR代码 无线电组 评分组 选择 分隔器 签名 Pad, 滑石、滑石、松纳、步子、相换、切换、表、目录、标签、, 标记输入,文本区域,计时器,旅游,树景,工具提示.

各处均可自 `@carsxe/design-system/components/<name>`. 警报和徽章 添加 `success` 财务报告和审定财务报表 `warning` 在通常的阴影集上方的变体. `Input` 已经 没有 `size` 变式——使用 `className` (例如:. `h-8`用于紧凑高地.

先进组成部分是Carsxe自有的实施工作,并不取决于 方舟UI或扎克. 交互过渡使用运动和尊重减动 偏好。 通过下列方式支持受控制和不受控制的状态: `value`编号 :`defaultValue` 财务报告和审定财务报表 `onValueChange`,或 `open`编号 :`defaultOpen` 财务报告和审定财务报表 `onOpenChange` 在适用的情况下.

### 旅游

```tsx
const tour = useTour({
  steps: [
    { id: "welcome", type: "dialog", title: "Welcome" },
    { id: "search", target: "#search", title: "Search by VIN" },
  ],
})

return (
  <>
    <button onClick={(event) => tour.start(undefined, event.currentTarget)}>
      Start tour
    </button>
    <Tour tour={tour} />
  </>
)
```

## 他们

语义符号活在 `:root` 财务报告和审定财务报表 `.dark`中的变量 而不是伪造组件.

| 脚本 | 光线 |
| --- | --- |
| `--primary` | `#065774` |
| `--primary-hover` | `#387990` |
| `--foreground` | `#3A3A3A` |
| `--background` | `#F9F9F9` |
| `--success` | `#00A63E` |
| `--destructive` | `#DA373E` |
| `--warning` | `#F79008` |
| `--radius` | `0` |

`--radius` 实值 `0`,所以角尖; 循环控制保持 `rounded-full`。 。 。 . 添加阴暗模式 `dark` 通常在祖先上课 `<html>`数字 :

```html
<html class="dark">
```

## 准则

-   不运行 `shadcn add` 在消费者应用软件中——从这个包件起的组件船.
-   不要将组件源复制到您的应用程序中, 也不要包装原始内容 .
-   自定义 `variant`, (中文(简体) ), `size`, (中文(简体) ), `className`,以及本地元素道具.

## 许可证

麻省理工学院

## 常见问题

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

\* Carsxe设计系统 \* shadcn/ui 组件以卡斯克思品牌为主\.

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

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

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

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

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

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

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

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

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

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

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

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