@jocoding-ax-partners /设计系统
只基于css设计系统 HeroUI v3.
这个包不导出任何组件。 从 @heroui/react 作为
通常的;这个包附带了一个样式表，用于重新设计样式，并注册一组样式表
设计令牌。没有提供程序，没有包装器，也没有JavaScript。
安装
npm install @jocoding-ax-partners/design-system @heroui/react@^3 @heroui/styles@^3 tailwindcss@^4
设置
添加一个导入到你的顺风CSS入口文件：
@import "tailwindcss";
@import "@jocoding-ax-partners/design-system/styles";
这就是整个过程。 @jocoding-ax-partners/design-system/styles 导入 @heroui/styles 本身,所以
您不需要单独导入它——但它仍然是对等依赖项，必须安装。
将导入置于 tailwindcss 在任何样式表之后，它都应该重写。
您的框架的顺风v4是上游设置-请参阅 顺风安装指南。相同 HeroUI的 需求和快速入门.
import { Button } from "@heroui/react"; // ✅
import { Button } from "@jocoding-ax-partners/design-system"; // ❌ does not exist
这个包增加了什么
data-* 属性
HeroUI的prop类型不能扩展，所以额外的选项依赖于数据属性。
| 组件 | 属性 | 值 |
|---|---|---|
Button (轮廓,鬼) | data-color | accent danger success warning info |
ToggleButton (默认情况下,鬼) | data-color | accent danger success warning info |
Chip | data-color | info |
Checkbox.Control | data-size | md |
Checkbox.Control | data-rounded | "true" |
Radio.Control | data-size | md |
<Button variant="outline" data-color="danger">Delete</Button>
列表框选择
内部 Select， ComboBox， Autocomplete 和独立 ListBox，项目指示器
是隐藏的，而选定的项则用重音背景标记。
<ListBox.Item id="florida" textValue="Florida">
Florida
<ListBox.ItemIndicator /> {/* opts this item into the accent background */}
</ListBox.Item>
呈现指示符就是将项选择到该样式中。没有一项的项目 保留heroi的外观，其中根本没有标记选择。
顺风公用事业
注册于股票Tailwind和HeroUI之上：
- 颜色 - - - - - -
accent-50…accent-950，gray-850，还有info家庭 （info，info-soft，info-soft-foreground，…)，英雄不发货 - 半径 - - - - - -
rounded-button-xs|sm|md|lg，rounded-input，rounded-list-box，rounded-toast，rounded-dialog，rounded-card,…… - 间距 - - - - - -
h-button-sm|md|lg，size-input，gap-field,…… - 排版 - - - - - -
text-display-01…04，text-heading-01…05，text-body-01…03，text-caption-01|02 - 变体 - - - - - -
light:，与HeroUI的对应dark:
HeroUI自己的调色板的某些部分也被重新赋值，而不需要添加实用程序名称——the 灰度移至中性色块，并有若干语义、面和场 角色被覆盖。保持使用HeroUI的实用程序名称。
确切的值在附带的样式表中
（node_modules/@jocoding-ax-partners/design-system/dist/styles/index.css）. 他们故意不这样做
在这里复制，因为副本从源漂移。
组件的文档
这个包不记录HeroUI的组件——那是由HeroUI来维护的 这里的副本每次发布都会过期。按顺序使用：
- HeroUI MCP服务器(
@heroui/react-mcp) - - - 设置 - v3.heroui.com/docs/react/components
node_modules/@heroui/react/dist/components/<name>/<name>.d.ts-已安装的 版本，当文档与运行时行为不一致时获胜
与编码代理一起使用
llms.txt 在包内传递，并且是所有内容的面向代理的参考
以上。让你的代理人立刻去找它，例如在 CLAUDE.md：
## @jocoding-ax-partners/design-system
This project uses @jocoding-ax-partners/design-system, a CSS-only design system on HeroUI v3.
Import all components from `@heroui/react`, never from `@jocoding-ax-partners/design-system`.
Read `node_modules/@jocoding-ax-partners/design-system/llms.txt` before writing UI code — it lists
the `data-*` extensions and design tokens this project adds on top of HeroUI.
许可证
麻省理工学院