# @petnow/ui 中文文档

规范地址：https://npmcn.com/package/%40petnow/ui/

版本：5\.1\.0
npm 元数据更新时间：2026-11-02T02:55:06.460Z
中文译文更新时间：2026-11-02T04:11:39.728Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40petnow/ui
原文对照：https://npmcn.com/package/%40petnow/ui/?lang=original

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

- 包体积（解压后）：214 kB，84 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，tailwindcss ^4\.1\.0
- 首次发布：2024-04-25T07:00:46.696Z
- 最新版本发布：2026-11-02T02:55:06.336Z
- 已发布版本数：92（近 12 个月 20 个）

## 中文简介

■■■■■■■■■■■■■■■■■■■React 19 / /顺风CSS / / v4 / /

## 安装

```sh
npm install @petnow/ui
```

也可以使用：`pnpm add @petnow/ui`、`yarn add @petnow/ui`、`bun add @petnow/ui`

## README

# @petnow / ui

■■■■■■■■■■■■■■■■■■■React 19 / /顺风CSS / / v4 / /

-   故事书: [https://components.petnow.co/](https://components.petnow.co/)
-   \[qh\] [CHANGELOG.md](https://npmcn.com/package/%40petnow/ui/CHANGELOG.md)
-   4.X / 10： [文档/迁移/ v4-to-v5.md](https://npmcn.com/package/%40petnow/ui/docs/migration/v4-to-v5.md)

## \* \* \* \*

1.  。顺风CSS v4.1。
    
    ```sh
    pnpm add @petnow/ui
    ```
    
2.  소비레포의메CSS인에서顺风를 **한번** 导入CSS。
    
    ```css
    @import "tailwindcss";
    @import "@petnow/ui/tailwind.css";
    ```
    
    `@petnow/ui/tailwind.css`\[qh\] \[qh\] \[qh `dist`를 `@source`\* \* \* \* \* \*顺风, 基础、基础、阴影、超大型、超大型、超大型、超大型、超大型、超大型、超大型、超大型。\[qh\] \[qh\]
    
3.  半 `Radio`나 `.scrollbar`， `.popup-scrollbar`， `.ja-break-all`， `.global-break-all` \[qh 导入。
    
    ```tsx
    import "@petnow/ui/dist/index.css";
    ```
    
    \* \* \* `components` 레이어에있어서소비레포效用로덮을수있고,进口위치에영향을받지않는다。
    
4.  ■■■■■■
    
    ```tsx
    import { CTAButton } from "@petnow/ui";
    // 또는 개별 경로
    import { CTAButton } from "@petnow/ui/v1/cta-button";
    ```
    

变身变身变身变身变身变身变身变身 `petify` 【中文】：1、“1”、“1”、“1”

## 구조

```
@petnow/ui
├── tailwind.css                  - 소비 레포가 import하는 Tailwind 엔트리 (v0 토큰은 deprecated)
├── petnow-design-system-v1.css   - v1 토큰(ref·시맨틱 컬러, 타이포그래피)
├── index.ts                      - 패키지 엔트리
├── src
│   ├── components
│   │   ├── ui - 내부 전용 primitive (export하지 않음)
│   │   ├── v0 - 기존 컴포넌트 (기능 추가 없이 유지)
│   │   └── v1 - 현재 컴포넌트와 아이콘
│   ├── styles/components.css - dist/index.css로 복사되는 일반 CSS
│   ├── index.css             - Storybook 엔트리
│   └── utils
├── test
│   ├── css - 소비 레포 방식으로 패키지 CSS를 빌드해 보는 테스트
│   ├── v0
│   └── v1
└── docs
    ├── adr
    └── migration
```

## 개발

节点小鱼小鱼小鱼 `mise.toml`\[qh\]规划은 `package.json`의 `packageManager`\[qh\]

```sh
mise install
pnpm i
pnpm storybook        # http://localhost:6006
pnpm jest
pnpm build            # tsc + vite 라이브러리 빌드 + dist/index.css 복사
```

## 배포

npm可信发布（OIDC）。GitHub Actions `NPM_TOKEN` 같은 \[qh\] \[qh\]

1.  大/大/合并/合并/合并PR：大表壳，大表壳，大表壳，大表壳，大表壳。
2.  Semver `v*` \[qh\] `v5.0.0`）。 `.github/workflows/publish-npm.yaml`\[qh `package.json`\* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*
3.  10 .大黄蜂 [CHANGELOG.md](https://npmcn.com/package/%40petnow/ui/CHANGELOG.md)와 `docs/migration/`【翻译】

## 常见问题

### @petnow/ui 是什么？

■■■■■■■■■■■■■■■■■■■React 19 / /顺风CSS / / v4 / /

### 如何安装 @petnow/ui？

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

### @petnow/ui 支持 TypeScript 吗？

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

### @petnow/ui 支持 ESM 还是 CommonJS？

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

### @petnow/ui 可以商用吗？

@petnow/ui 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @petnow/ui 还在维护吗？

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