# @alexandernygard/components 中文文档

规范地址：https://npmcn.com/package/%40alexandernygard/components/

版本：0\.6\.0
npm 元数据更新时间：2026-10-28T19:30:07.377Z
中文译文更新时间：2026-11-08T15:00:41.835Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40alexandernygard/components
原文对照：https://npmcn.com/package/%40alexandernygard/components/?lang=original
源码仓库：https://github.com/alexandernygard/components

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

- 包体积（解压后）：1.2 MB，251 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：20 个
- peer 依赖：react ^18\.3\.0 \|\| ^19\.0\.0，recharts ^3\.8\.0，react-dom ^18\.3\.0 \|\| ^19\.0\.0
- 首次发布：2026-10-18T11:44:05.769Z
- 最新版本发布：2026-10-28T19:30:06.746Z
- 近 30 天下载量：1771（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

Alex Nygård的 React 组件库: shadcn/ui + Radix + Tailwind 4, 有很酷的北欧主题.

## 安装

```sh
npm install @alexandernygard/components
```

也可以使用：`pnpm add @alexandernygard/components`、`yarn add @alexandernygard/components`、`bun add @alexandernygard/components`

## README

# @ alexandernygard/ 组件

我应用背后的回放组件:在Radix上63个shadcn/ui组件,以Tailwind 4和一个共享主题为风格. 故事书是工作本.

使用 Svelte 应用程序 [`@alexandernygard/components-svelte`](https://npmcn.com/package/%40alexandernygard/svelte),其组件和主题相同。 双方从 [`@alexandernygard/tokens`](https://npmcn.com/package/%40alexandernygard/tokens)。 。 。 .

## 在应用程序中使用

```bash
pnpm add @alexandernygard/components
```

**尾风4** (lommebok,内部设计师和任何新的Vite app). 在 Tailwind 后导入主题 。 它添加了符号和字体,并将 Tailwind 标注在软件包中,从而生成各类:

```css
@import "tailwindcss";
@import "@alexandernygard/components/theme.css";
```

**没有尾风**,一次导入预编译样式表 :

```ts
import "@alexandernygard/components/styles.css"
```

然后说:

```tsx
import { Button, Card, CardHeader, CardTitle, TooltipProvider, Toaster } from "@alexandernygard/components"
```

将应用程序包入 `TooltipProvider` 如果它使用工具提示,并渲染 `<Toaster />` 如果用土司的话. `toast()` 所以不需要安装声纳器 暗模式为 `dark` 课开始 `<html>`。同伴依赖关系是: `react` 财务报告和审定财务报表 `react-dom` 第18.3条或第19条.

每个模块都是自己的文件,包被标记为副作用自由,因此一个应用只捆绑它所导入的东西. 图表(recharts),语法突出(shiki),旋转木马不使用.

## 外观

-   **颜色.** 雪 `#f5f7f8`花岗岩 `#18212b`霜冻 `#dde3e8`一个口音 云莓 `#f2a922`。 Cloudberry 只标记或选中状态: 复选框、 开关、 收音机、 滑动器、 进度、 活动标签、 按下切换、 活动侧栏项和焦点环 .
-   **类型.** 利布伦,来自 `@alexandernygard/libron`为了一切 纸牌、对话框、工作表、抽屉、空状态、字段传奇和调查问卷使用中的标题 `font-heading`,所以一个应用程序可以给标题 不同的面孔通过压倒性 `--font-heading`。 。 。 .
-   **形状.** 角落随大小而增长:4px为复选框,8px为控件,12px为卡片,16px为对话框,全圆为徽章和开关. 影被分层并被用墨子颜色所取出.
-   **状态.** `positive`, (中文(简体) ), `warning`, (中文(简体) ), `info` 财务报告和审定财务报表 `destructive` 标志。 徽章和警示有相匹配的变体.

在应用程序中覆盖一个符号 :

```css
:root {
  --highlight: #3fa36b;
  --ring: #2f8556;
}
```

## 里面有什么东西

密码 提醒 提醒 提醒 对话框 相位比 附件 相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相位相.

Bubble,Message,Message卷轴,Marker,附件,Trace,工具呼叫,代码块和问卷覆盖助手和聊天界面. `ToolViewsProvider` 设定每个工具的输入和输出如何显示,以及 `ToolTrace` 由@alexandernygard/ai-kit提供工具电话.

## 开发

这个软件包生活在pnpm工作空间. 运行这些从 `packages/react`,或从 repo 根 `pnpm --filter @alexandernygard/components <script>`。 。 。 .

```bash
pnpm install
pnpm dev              # Storybook on http://localhost:6006
pnpm typecheck
pnpm build            # dist/: ES modules, .d.ts, theme.css, styles.css, fonts.css
pnpm build-storybook  # static Storybook in storybook-static/
```

-   组员住在 `src/components/ui/`他们是Shadcn的 `radix-nova` 有主题编辑的源, 所以 `shadcn add <name>` 工作时 别走 `--overwrite` 以更新已有的组件,或丢失编辑.
-   添加组件后运行 `node scripts/gen-index.mjs` ,然后在 `src/stories/components/`。 。 。 .
-   鼠标和字体 `packages/tokens`,与斯维尔特图书馆共享. `src/styles/shadcn.css` 由shadcn包(海关变体, `scroll-fade`, (中文(简体) ), `shimmer`) (中文(简体) ).
-   故事分为基础(托盘、类型、半径、高地)、组件和模式(应用程序外壳、设置页面、助理聊天).

## 发布

释放通过 Repo 根的 Changersets. 见 [发布](https://npmcn.com/package/README.md#publish) 在根读取.

## 常见问题

### @alexandernygard/components 是什么？

Alex Nygård的 React 组件库: shadcn/ui \+ Radix \+ Tailwind 4, 有很酷的北欧主题\.

### 如何安装 @alexandernygard/components？

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

### @alexandernygard/components 支持 TypeScript 吗？

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

### @alexandernygard/components 支持 ESM 还是 CommonJS？

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

### @alexandernygard/components 可以商用吗？

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

### @alexandernygard/components 的下载量有多少？

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

### @alexandernygard/components 还在维护吗？

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