@box-kite/react

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

文档 • 妇女 从AI开始 • 妇女 游戏场 • 妇女 显示大小写 • 妇女 博客 • 妇女 释放

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

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

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 , 并附带一个设计, 样本页和其中已经设置的代理 :

npm create @box-kite@latest

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

npm install @box-kite/react

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

为什么是黑盒基特

🤖为AI代理所建

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

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

✅ 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控制台被写成快取. 每条警告都写了什么 写什么的台词 测试运行修正自身 :

[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 • 妇女 代理组件 • 妇女 间接

键入到值

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

<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 属性.

* 比例表

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

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

组件

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

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

XQ 服务器组件

// 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,而不是按元素 命令 —— 如何运作 • 妇女 根据中央支助系统模块计量 • 妇女 一个完整的 Next.js app

• 软件包

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

• 文档 ——每个道具和组件,有活地演示
• 从AI开始 ——用 Claude Code, Cursor, Codex 或 Copilot 三个提示构建一个应用程序
• 为AI所建 - 是什么船给特工的,为什么
• 他们, (中文(简体) ), 扩展, (中文(简体) ), 逃逸舱门
• BOX_KITE_AI_CONTEXT.md ——一页上整个地表

捐款

欢迎提出问题和拉动请求——首先 捐款额,涵盖建筑和 框架无核心边界。 问: 支助脆弱性 警卫。 。 。 .

如果Box Kite能节省你的时间, 打开一个QQ GitHub 图像 帮助其他人找到它.

许可证

麻省理工学院 马克西姆·普罗开科