@nzha/kit

从 Melo UI 迁移出的 React 组件包，包含基础组件、表单与覆盖层、数据展示、Composer、Markdown、AI Elements，以及对应的 Tailwind v4 主题样式。

安装

npm install @nzha/kit

React 与 React DOM 是 peer dependencies，支持 React 18.2 至 React 19。

使用

应用入口加载一次组件样式：

import "@nzha/kit/styles.css"

之后从包入口导入组件：

import { Button, Form, FormItem, Input, Markdown } from "@nzha/kit"

export function Example() {
  return (
    <Form onFinish={console.log}>
      <FormItem name="name" label="Name">
        <Input />
      </FormItem>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
      <Markdown>{"**@nzha/kit** is ready."}</Markdown>
    </Form>
  )
}

低层基础组件通过高级定制入口提供：

// 完整主入口：Kit 语义组件、组合组件与带 Primitive 后缀的基础组件
import { Button, ButtonPrimitive, Composer, Markdown } from "@nzha/kit"

// Primitives：无业务语义的底层组件，仅在高级定制时使用
import {
  ButtonPrimitive,
  CardPrimitive,
  DialogPrimitive,
} from "@nzha/kit/primitives"

源码中的 components/composites 与 components/primitives 是内部组织方式，不作为公共路径暴露。业务代码默认只使用 @nzha/kit；需要绕过 Kit 语义层进行高级组合时才使用 /primitives。所有公共基础组件都使用 Primitive 后缀。

专用入口：

import { Reasoning, Tool } from "@nzha/kit/ai-elements"
import { Composer } from "@nzha/kit/composer"
import { SparklesIcon } from "@nzha/kit/icons"

本包是 ESM package；Vite、Rspack、Webpack 5、Next.js 等现代构建工具可直接使用。

预览

npm install
npm run build
npm run dev

npm run dev 会读取现有 dist；修改 kit 源码后重新运行 npm run build。生产预览可使用：

npm run build:demo
npm run preview

• /：组件文档首页。
• /components：76 个公开组件的可搜索目录。
• /components/button：单个组件文档页；其余组件使用同样的独立 URL，均包含安装方式、真实示例、复制代码和 API Reference。
• /kit：兼容旧地址，自动跳转到 /components。
• /blocks：组合组件预览页。

预览应用通过 Vite alias 直接消费 dist 中已构建的 @nzha/kit 入口，因此可以同时验证组件源码与发布产物的实际集成。

构建与发包检查

npm run typecheck
npm run build:demo
npm pack --dry-run

发布产物仅包含 dist 与本 README。包入口包括：

• @nzha/kit
• @nzha/kit/primitives
• @nzha/kit/ai-elements
• @nzha/kit/composer
• @nzha/kit/icons
• @nzha/kit/styles.css

Kit 不内置业务 API。Markdown 沙箱图片通过 resolveSandboxImageSrc 映射地址；宿主应用可对接任意后端实现。