# @sckyzo/cosmos-react 中文文档

规范地址：https://npmcn.com/package/%40sckyzo/cosmos-react/

版本：0\.6\.0
npm 元数据更新时间：2026-11-02T09:31:33.670Z
中文译文更新时间：2026-11-02T10:17:37.428Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40sckyzo/cosmos-react
原文对照：https://npmcn.com/package/%40sckyzo/cosmos-react/?lang=original
项目主页：https://github.com/SckyzO/cosmos/tree/main/packages/react
源码仓库：https://github.com/SckyzO/cosmos

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

- 包体积（解压后）：9.7 MB，41 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：14 个
- peer 依赖：qr ~0\.7\.2，react ^19\.0\.0，shiki ^4\.5\.0，react-dom ^19\.0\.0，@tiptap/pm ^3\.32\.0，maplibre-gl ^5\.24\.0 \|\| ^6\.4\.1，@tiptap/core ^3\.32\.0，@tiptap/react ^3\.32\.0，@tiptap/extensions ^3\.32\.0，@tiptap/starter-kit ^3\.32\.0，@tiptap/extension-image ^3\.32\.0，@tiptap/extension-text-align ^3\.32\.0
- 首次发布：2026-05-20T22:36:55.040Z
- 最新版本发布：2026-11-02T09:31:33.191Z
- 已发布版本数：10（近 12 个月 10 个）

## 中文简介

React 19 +顺风4 UI组件库- 135+主题，可访问的组件（表单，覆盖，导航，表格，数据显示）与内置的明暗模式。

## 安装

```sh
npm install @sckyzo/cosmos-react
```

也可以使用：`pnpm add @sckyzo/cosmos-react`、`yarn add @sckyzo/cosmos-react`、`bun add @sckyzo/cosmos-react`

## README

# @sckyzo / cosmos-react

[![npm](https://img.shields.io/npm/v/@sckyzo/cosmos-react)](https://www.npmjs.com/package/@sckyzo/cosmos-react)

Cosmos设计系统的React 19组件库：主题表，可访问组件， 使用Tailwind 4构建，并作为ESM， CJS和types发货。

中浏览完整目录 [生活故事书](https://sckyzo.github.io/cosmos/).

## 安装

```bash
npm install @sckyzo/cosmos-react @sckyzo/cosmos-theme
npm install react react-dom   # peers, react 19+
```

`@sckyzo/cosmos-theme` 包含CSS（标记、字体、主题和重音变量）。这个 组件在没有它的情况下呈现无样式。三个Cosmos包共享一个版本号： 安装相同的版本。

## 设置样式

组件是用顺风4实用程序类设计的，所以你的应用的顺风构建必须 生成它们。顺风不扫描 `node_modules`，所以你 **必须** 点 `@source` 在 安装包：如果没有它，就不会生成Cosmos类，并且每个组件都呈现无样式。

在你的主CSS文件中：

```css
@import 'tailwindcss';

/* Required. The path is relative to this CSS file; adjust the depth to your layout. */
@source '../node_modules/@sckyzo/cosmos-react/dist/**/*.{js,cjs}';

@import '@sckyzo/cosmos-theme/tailwind';
@import '@sckyzo/cosmos-theme/vars';

/* Optional: the Outfit + JetBrains Mono webfonts. */
@import '@sckyzo/cosmos-theme/fonts';

/* Only if you use Calendar, DatePicker or a component built on them. */
@import '@sckyzo/cosmos-react/calendar.css';
```

## 使用

```tsx
import { useState } from 'react';
import { Button, Modal } from '@sckyzo/cosmos-react';

function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open</Button>
      <Modal open={open} onClose={() => setOpen(false)}>
        <Modal.Header title="Hello from Cosmos" onClose={() => setOpen(false)} />
        <Modal.Body>A themed, focus-trapped dialog.</Modal.Body>
      </Modal>
    </>
  );
}
```

## 文档

-   [开始](https://github.com/SckyzO/cosmos/blob/main/docs/getting-started.md)说明了设置，并附有一个Vite和一个Next.js配方。
-   [外观](https://github.com/SckyzO/cosmos/blob/main/docs/guides/appearance.md)：主题、重音、字体、密度、半径和选择器。
-   [可选的条目](https://github.com/SckyzO/cosmos/blob/main/docs/guides/optional-entries.md)： `@sckyzo/cosmos-react/code`， `/editor`， `/map` 和 `/qr`.
-   [从右到左](https://github.com/SckyzO/cosmos/blob/main/docs/guides/right-to-left.md) 和 [参考和路由](https://github.com/SckyzO/cosmos/blob/main/docs/guides/refs-and-routing.md).
-   [组件笔记](https://github.com/SckyzO/cosmos/blob/main/docs/README.md#components)：表格、表单、支付、监控、日志、聊天、应用程序外壳等。
-   [图表](https://github.com/SckyzO/cosmos/blob/main/docs/guides/charts.md) 住在 `@sckyzo/cosmos-charts`，所以不呈现图表的应用程序 不要发布图表库。

## 许可证

麻省理工学院,看到 [许可证](https://github.com/SckyzO/cosmos/blob/main/LICENSE).

## 常见问题

### @sckyzo/cosmos-react 是什么？

React 19 \+顺风4 UI组件库- 135\+主题，可访问的组件（表单，覆盖，导航，表格，数据显示）与内置的明暗模式。

### 如何安装 @sckyzo/cosmos-react？

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

### @sckyzo/cosmos-react 支持 TypeScript 吗？

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

### @sckyzo/cosmos-react 支持 ESM 还是 CommonJS？

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

### @sckyzo/cosmos-react 可以商用吗？

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

### @sckyzo/cosmos-react 还在维护吗？

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