# @box-kite/react 中文文档

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

版本：2\.4\.0
npm 元数据更新时间：2026-11-06T22:49:44.070Z
中文译文更新时间：2026-11-08T12:58:00.107Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40box-kite/react
原文对照：https://npmcn.com/package/%40box-kite/react/?lang=original
项目主页：https://www.box-kite.dev/
源码仓库：https://github.com/box-kite/box-kite

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

- 包体积（解压后）：3.2 MB，448 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0
- 首次发布：2026-08-25T14:13:48.727Z
- 最新版本发布：2026-11-06T22:49:43.700Z
- 近 30 天下载量：3654（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：27（近 12 个月 27 个）

## 中文简介

一个反应组件将 CSS 属性作为打入道具,并在运行时生成原子 CSS ——没有 CSS 文件,没有构建步骤,在服务器组件中生成.

## 安装

```sh
npm install @box-kite/react
```

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

## README

[![Box Kite — every CSS property is a typed prop. The React styling library your AI already knows.](https://raw.githubusercontent.com/box-kite/box-kite/main/.github/assets/banner.png)](https://www.box-kite.dev/)

### AI- First, 为 React 完全输入的样式库

[![npm version](https://img.shields.io/npm/v/@box-kite/react?color=7c3aed&label=npm)](https://www.npmjs.com/package/@box-kite/react) [![Tests](https://github.com/box-kite/box-kite/actions/workflows/test.yml/badge.svg)](https://github.com/box-kite/box-kite/actions/workflows/test.yml) ![TypeScript: every value is typed](https://img.shields.io/badge/TypeScript-every%20value-3178c6?logo=typescript&logoColor=white) [![No third-party dependencies](https://img.shields.io/badge/dependencies-no%20third--party-10b981)](https://npmcn.com/package/%40box-kite/react/#readme--packages) [![AGENTS.md ships in the package](https://img.shields.io/badge/AGENTS.md-in%20the%20package-8b5cf6)](https://npmcn.com/package/%40box-kite/react/#readme--built-for-ai-agents) [![MCP server](https://img.shields.io/badge/MCP-server-a855f7)](https://www.npmjs.com/package/@box-kite/mcp) [![MIT license](https://img.shields.io/npm/l/@box-kite/react?color=64748b)](https://npmcn.com/package/%40box-kite/react/LICENSE)

[**文档**](https://www.box-kite.dev/) • 妇女 [**从AI开始**](https://www.box-kite.dev/start-with-ai/) • 妇女 [游戏场](https://www.box-kite.dev/playground/) • 妇女 [显示大小写](https://www.box-kite.dev/showcase/) • 妇女 [博客](https://www.box-kite.dev/blog/) • 妇女 [释放](https://github.com/box-kite/box-kite/releases)

* * *

**框键** 在 TypeScript 中反应样式。 每个CSS财产都是一个道具 `Box`,每个值都是类型,CSS是 在运行时为您编写 —— 每个值共享一个类, 不导入样式表, 不创建类名, 没有构建插件 .

它的建造是 **由大赦国际撰写**: 从包件内的发动机船测量的规则和参考文献, MCP 服务器对照真实的引擎检查道具包,编译器拒绝库不会渲染的值.

```tsx
import Button from '@box-kite/react/components/button';
import Flex from '@box-kite/react/components/flex';
import { H2, P } from '@box-kite/react/components/semantics';

export function PlanCard() {
  return (
    <Flex d="column" gap={3} p={6} md={{ p: 8 }} borderRadius={3} shadow="md"
          bgColor="white" theme={{ dark: { bgColor: 'slate-900' } }}>
      <H2 fontSize={20} fontWeight={600}>Pro plan</H2>
      <P color="slate-600">Every value on this card is checked by the compiler.</P>
      <Button hover={{ bgColor: 'indigo-600' }}>Upgrade</Button>
    </Flex>
  );
}
```

每个道具成为一个共享的类: `p={6}` 实值 `padding: 1.5rem`, (中文(简体) ), `md` 在媒体查询中包裹它, `theme` 把它放大到黑暗中 子树,和应用程序中其它任何地方的同值重用相同的规则.

## 快速启动

启动一个新的 Vite + React app , 并附带一个设计, 样本页和其中已经设置的代理 :

```bash
npm create @box-kite@latest
```

或者把它添加到你的应用程序中:

```bash
npm install @box-kite/react
```

反应 18 或更新,以及 **无第三方依赖关系**:安装是Box Kite和自己的引擎,别无其他. 类型脚本 可选的,但它是图书馆发光的地方.

## 为什么是黑盒基特

<table><tbody><tr><td><h4>* AI-First</h4><p>包装的是自己的 <code>AGENTS.md</code>页:1 <code>docs/</code> 文件夹和技能,全部来自道具 注册,所以他们永远不能 是一个版本后。 一个 MCP 服务器回答中任务 .</p></td><td><h4>键入到值</h4><p>每个道具都接受一个已关闭的集:调色板符号,比例阶,关键词. typo 是一个编译错误 <i>“你是说”</i>而不是默默缺失的风格.</p></td></tr><tr><td><h4>零配置,零依赖</h4><p>没有 CSS 文件, 没有 PostCSS , 没有捆绑插件, 没有提供者 —— 也没有在您的锁文件中的第三方包 。 样式是 按要求生成,并因内容而繁复.</p></td><td><h4>XQ 服务器组件</h4><p>在反演服务器组件中的渲染器没有 <code>'use client'</code>: 每项规则都以加分为标准 <code>&lt;style&gt;</code> 反应出19架起重机和起重机.</p></td></tr><tr><td><h4>• 无障碍组件</h4><p>对话框、 菜单、 Tabs、 Combobox、 DatePicker、 DataGrid 等, 每个都带有 ARIA 和 APG 模式的键盘 用斧头在CI.</p></td><td><h4>作为道具的现代CSS</h4><p>OKLCH调色板,主题,容器查询, <code>@starting-style</code>,锁定定位,视图过渡,滚动 时间表——和顶层,而不是 <code>z-index</code>。 。 。 .</p></td></tr></tbody></table>

## 🤖为AI代理所建

一个模型对一个CSS-in-JS API的记忆通常是对一个 _不同_ API — 这里的道具名称与 Tailwind 相撞 和查克拉的 而数字意味着别的东西。 所以Box Kite并不依赖于模型所记得的:

| 什麽 | 或т |
| --- | --- |
| **`AGENTS.md` + 键 `docs/`** npm 包内 | 自动 - `node_modules/@box-kite/react/AGENTS.md`,每道道具 和CSS 它写 |
| **项目线路** (单位:千美元)`AGENTS.md`, (中文(简体) ), `CLAUDE.md`, MCP) (中文(简体) ) | `npm create @box-kite@latest -- --agents-only` ——合并到已有的重播,并在重播时更新 |
| **技能** 克劳德代码,光标,代码,副驾驶.. | `npx skills add box-kite/box-kite` |
| **MCP 服务器** - 没有钥匙,没有网络 | `claude mcp add box-kite -- npx -y @box-kite/mcp` (或你的编辑所接受的stdio配置) |
| **页:1** 和下标记文件 | [box-kite.dev/llms.txt (英语)](https://www.box-kite.dev/llms.txt) — 附录 `.md` 到任何文件 URL |

**`check_styles` 通过真正的引擎运行你的道具.** 库不接受的值不写规则和类 名称——通过设计,所以一个打字机从不发出破损的宣告. MCP工具使这一点在任何事情之前变得明显:

```text
✅ p         → .p-4{padding:1rem}
❌ bgColor   does not accept "blue-550" — no rule and no class name were written.
✅ fontSize  → .fontSize-14{font-size:0.875rem}
⚠️ href      an HTML attribute, not a style prop. Written at the top level it typechecks
             and is then dropped — it goes in props={{ "href": … }}.
```

**Dev控制台被写成快取.** 每条警告都写了什么 写什么的台词 测试运行修正自身 :

```text
[box-kite] bgColor="bleu-500" wrote no CSS: bgColor does not take that value, so the prop
           was dropped along with its class. Did you mean "blue-500"?
[box-kite] fontSize={4} is 4px text: fontSize's divider is 16, not the spacing scale's 4,
           so the number is the pixel size. For 16px write fontSize={16}.
```

**一个UI在跑步时间写作是一等公民.** `catalog()` 转换每个组件和每个值的道具 加入JSON Schema——形状结构输出,json-render和A2UI想要——和 `<SpecRenderer>` 使什么回来, 检查每个节点和您控制的允许列表. `toolPart()` 财务报告和审定财务报表 `a2uiToSpec()` 读取AI SDK,助理-i,副驾驶Kit, AG-UI和A2UI,以及 `<ToolCallCard>`, (中文(简体) ), `<ApprovalCard>`, (中文(简体) ), `<Reasoning>` 财务报告和审定财务报表 `<StreamingText>` 画出一个代理. → [遗传性UI](https://www.box-kite.dev/generative-ui/) • 妇女 [代理组件](https://www.box-kite.dev/agent/) • 妇女 [间接](https://www.box-kite.dev/interop/)

## 键入到值

道具没有 `string`颜色为调色板符号(带有可选的符号) `/opacity`),相距是尺度,关键词是结合——所以 编辑器自动完成它们,而编译器抓住其余的:

```tsx
<Box bgColor="bleu-500" />
//   ~~~~~~~ ts(2820): Type '"bleu-500"' is not assignable… Did you mean '"blue-500"'?

<Box display="flexx" />
//   ~~~~~~~ ts(2820): … Did you mean '"flex"'?

<Box opacity={50} />
//   ~~~~~~~ ts(2322): Type '50' is not assignable to type '0 | 1 | 0.1 | 0.2 | …'

<Button variant="primaryy">Save</Button>
//      ~~~~~~~ ts(2322): a component's variants are typed too

<Box css={{ mixBlendMod: 'multiply' }} />
//          ~~~~~~~~~~~ ts(2561): … Did you mean to write 'mixBlendMode'?
```

-   **过道具,看看它的CSS.** 每个道具的JSDoc都有一个例子,比如: `p={4} → padding: 1rem` ——通过运行生成 引擎,所以编辑器永远不能教授库停止使用的大小.
-   **你自己的信物也加入了这些类型.** `Box.extend()` 添加变量、道具和值; 1 `declare module` 让他们 自动完成像内置. `Box.components()` 变体的打法相同.
-   **逃生舱口也是打字的.** `css={{ … }}` 检查对象 `csstype` 并且仍然编译为共享的类——从不 `style` 属性.

## \* 比例表

值得从心底中吸取教训的一件事——划分者是每个道克:

| Prop | 缩放 | 示例 |
| --- | --- | --- |
| `p`, (中文(简体) ), `m`, (中文(简体) ), `gap`, (中文(简体) ), `width`, (中文(简体) ), `borderRadius` | 4(季度雷姆) | `p={4}` → `1rem` (16px) (英语) |
| `fontSize` | 页:1 | `fontSize={14}` → `0.875rem` (14px) (中文(简体) ) |
| `b` (边界宽度), `lineHeight` | ưμ㼯a | `b={1}` → `1px` |
| `animationDuration`, (中文(简体) ), `transitionDelay`. | 分钟 | `transitionDuration={150}` → `150ms` |
| 颜色 | 符号 + `/opacity` | `bgColor="blue-500/40"` → `color-mix(…)` |

3个常规从"每个视觉值都是道具"中遵循: 元素来自元件 (`<Flex>`, (中文(简体) ), `<Button>`, (中文(简体) ), `<H1>`, (中文(简体) ), `<Path>`, HTML 属性进入 `props` (单位:千美元)`<Link props={{ href: '/about' }}>`),没有 `style={{ }}`。 。 。 .

## 组件

每个组件都是 `Box` 下同道具, 相同的主题,相同的 `variant`s——每个入口都是自己的,所以 `Textbox` 从不拉 `DataGrid` 在你的捆绑.

| 区域 | 构成部分 |
| --- | --- |
| **版图内容( C)** | [`Flex`](https://www.box-kite.dev/flex/), (中文(简体) ), [`Grid`](https://www.box-kite.dev/grid/), (中文(简体) ), `H1`– 说吧 –`H6`, (中文(简体) ), `P`, (中文(简体) ), `Link`, (中文(简体) ), `Nav`. [`List`](https://www.box-kite.dev/list/), (中文(简体) ), [`Svg` + 每个 SVG 元素](https://www.box-kite.dev/svg/), (中文(简体) ), [`Icon`](https://www.box-kite.dev/icon/), (中文(简体) ), `Skeleton` |
| **表单** | [`Button`](https://www.box-kite.dev/button/), (中文(简体) ), [`Textbox`](https://www.box-kite.dev/textbox/), (中文(简体) ), [`Checkbox`](https://www.box-kite.dev/checkbox/), (中文(简体) ), [`Switch`](https://www.box-kite.dev/switch/), (中文(简体) ), [`RadioGroup`](https://www.box-kite.dev/radiobutton/), (中文(简体) ), [`Combobox`](https://www.box-kite.dev/combobox/), (中文(简体) ), [`Slider`](https://www.box-kite.dev/slider/), (中文(简体) ), `Form` |
| **日期** | [`DateField`](https://www.box-kite.dev/date-field/), (中文(简体) ), [`Calendar`](https://www.box-kite.dev/calendar/), (中文(简体) ), [`DatePicker`](https://www.box-kite.dev/date-picker/), (中文(简体) ), `TimeZoneSelect` 安全地带 [日期模块](https://www.box-kite.dev/dates/) |
| **重叠** | [`Dialog`](https://www.box-kite.dev/dialog/), (中文(简体) ), [`Popover`](https://www.box-kite.dev/popover/), (中文(简体) ), [`Menu`](https://www.box-kite.dev/menu/), (中文(简体) ), [`Tooltip`](https://www.box-kite.dev/tooltip/), (中文(简体) ), [`Toaster`](https://www.box-kite.dev/toaster/) 在顶层,没有传送门,没有 `z-index` |
| **披露** | [`Tabs`](https://www.box-kite.dev/tabs/), (中文(简体) ), [`Accordion`](https://www.box-kite.dev/accordion/), (中文(简体) ), [`Progress`](https://www.box-kite.dev/progress/) |
| **数据仪表板( T)** | [`DataGrid`](https://www.box-kite.dev/datagrid/) (类型、过滤器、组、编辑、粘贴、虚拟化), [`DashboardGrid`](https://www.box-kite.dev/dashboard/), (中文(简体) ), [`Sparkline`, (中文(简体) ), `Gauge`, (中文(简体) ), `ChartContainer`](https://www.box-kite.dev/charts/) |
| **大赦国际** | [`ToolCallCard`, (中文(简体) ), `ApprovalCard`, (中文(简体) ), `Reasoning`, (中文(简体) ), `StreamingText`](https://www.box-kite.dev/agent/), (中文(简体) ), `markdownComponents`, (中文(简体) ), [`SpecRenderer`](https://www.box-kite.dev/generative-ui/) |

舰只背后的行为 `@box-kite/react/a11y` ——重点回放,巡回重点回放,解聘和可控 状态——用于您自己构建的部件.

## XQ 服务器组件

```tsx
// app/page.tsx — a Server Component. No 'use client', no provider, no CSS import.
import Flex from '@box-kite/react/components/flex';
import { H1 } from '@box-kite/react/components/semantics';

export default function Page() {
  return (
    <Flex d="column" gap={2} p={6}>
      <H1 fontSize={24}>Rendered on the server</H1>
    </Flex>
  );
}
```

这个 `react-server` 导出条件决定了“框”的无钩构建; 每项规则都作为 `<style href precedence>` 将19个吊杆重置到 `<head>` 和装饰,所以它是安全的,级联由 `@layer`,而不是按元素 命令 —— [如何运作](https://www.box-kite.dev/server-components/) • 妇女 [根据中央支助系统模块计量](https://www.box-kite.dev/blog/styling-server-components/) • 妇女 [一个完整的 Next.js app](https://npmcn.com/package/%40box-kite/react/examples/next-app)

## • 软件包

| 软件包 | 这是什么 |
| --- | --- |
| [`@box-kite/react`](https://www.npmjs.com/package/@box-kite/react) | `Box`,每个组件和钩;取决于 `@box-kite/core` 没有别的了 |
| [`@box-kite/core`](https://www.npmjs.com/package/@box-kite/core) | 没有框架和依赖性的造型引擎—— `createStyleEngine().classNames(props)` (单位:千美元)[实例](https://npmcn.com/package/%40box-kite/react/examples/vanilla)(中文(简体) ) |
| [`@box-kite/mcp`](https://www.npmjs.com/package/@box-kite/mcp) | mCP 服务器: Docs 搜索、道具、组件、规则和 `check_styles` |
| [`@box-kite/create`](https://www.npmjs.com/package/@box-kite/create) | `npm create @box-kite` – 一个Vite + React app 有设计和代理设置的应用程序 |

## {\\fn华文楷体\\fs16\\1cHE0E0E0}学习更多

-   **[文档](https://www.box-kite.dev/)** ——每个道具和组件,有活地演示
-   **[从AI开始](https://www.box-kite.dev/start-with-ai/)** ——用 Claude Code, Cursor, Codex 或 Copilot 三个提示构建一个应用程序
-   **[为AI所建](https://www.box-kite.dev/ai-context/)** - 是什么船给特工的,为什么
-   **[他们](https://www.box-kite.dev/theme-setup/)**, (中文(简体) ), **[扩展](https://www.box-kite.dev/box-functions/)**, (中文(简体) ), **[逃逸舱门](https://www.box-kite.dev/escape-hatch/)**
-   **[`BOX_KITE_AI_CONTEXT.md`](https://npmcn.com/package/%40box-kite/react/src/BOX_KITE_AI_CONTEXT.md)** ——一页上整个地表

## 捐款

欢迎提出问题和拉动请求——首先 [捐款额](https://npmcn.com/package/%40box-kite/react/CONTRIBUTING.md),涵盖建筑和 框架无核心边界。 问: [支助](https://npmcn.com/package/%40box-kite/react/SUPPORT.md)脆弱性 [警卫](https://npmcn.com/package/%40box-kite/react/SECURITY.md)。 。 。 .

如果Box Kite能节省你的时间, 打开一个QQ [GitHub 图像](https://github.com/box-kite/box-kite) 帮助其他人找到它.

## 许可证

[麻省理工学院](https://npmcn.com/package/%40box-kite/react/LICENSE) 马克西姆·普罗开科

## 常见问题

### @box-kite/react 是什么？

一个反应组件将 CSS 属性作为打入道具,并在运行时生成原子 CSS ——没有 CSS 文件,没有构建步骤,在服务器组件中生成\.

### 如何安装 @box-kite/react？

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

### @box-kite/react 支持 TypeScript 吗？

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

### @box-kite/react 支持 ESM 还是 CommonJS？

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

### @box-kite/react 可以商用吗？

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

### @box-kite/react 的下载量有多少？

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

### @box-kite/react 还在维护吗？

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