React KUI

特性

• 基于 React 19.2+，使用现代 React API 构建
• 使用 TypeScript 开发，提供完整的组件类型声明
• 50+ 桌面端组件，覆盖通用、布局、导航、表单、数据展示和反馈场景
• 支持主题定制、暗色模式和多种组件尺寸
• 内置国际化能力及多语言资源
• 支持按需使用组件，适用于 Vite 等现代前端工程
• 支持现代浏览器和 Electron

文档

• 快速开始
• 组件总览
• 暗色模式
• 国际化
• 更新日志

安装

使用 pnpm：

pnpm add react-kui kui-icons

也可以使用 npm、Yarn 或 Bun：

npm install react-kui kui-icons
yarn add react-kui kui-icons
bun add react-kui kui-icons

react 和 react-dom 是 peer dependencies，项目需要使用 React 19.2+。

快速开始

在应用入口引入组件库样式，然后直接使用组件：

import { createRoot } from "react-dom/client";
import { Button, Space, message } from "react-kui";
import "react-kui/style/index.css";

function App() {
  return (
    <Space>
      <Button type="primary" onClick={() => message.success("Hello React KUI!")}>
        Primary
      </Button>
      <Button>Default</Button>
    </Space>
  );
}

createRoot(document.getElementById("root")!).render(<App />);

组件 Props 和事件都带有 TypeScript 类型，可直接获得编辑器提示：

import { Cascader, type CascaderOption, type CascaderValue } from "react-kui";
import { useState } from "react";

const options: CascaderOption[] = [
  {
    value: "hubei",
    label: "湖北省",
    children: [{ value: "wuhan", label: "武汉市" }],
  },
];

export default function Demo() {
  const [value, setValue] = useState<CascaderValue>([]);
  return <Cascader value={value} options={options} onChange={setValue} />;
}

本地开发

git clone git@github.com:smallerqiu/kui-react.git
cd kui-react
pnpm install
pnpm dev

文档开发服务器默认运行在 http://localhost:7006。

常用命令：

pnpm dev          # 启动文档开发服务器
pnpm typecheck    # TypeScript 类型检查
pnpm build:docs   # 构建文档站
pnpm build        # 构建组件库及样式

浏览器支持

支持主流现代浏览器的最近两个版本，包括 Chrome、Edge、Firefox 和 Safari；不支持 Internet Explorer。

参与贡献

欢迎提交 Issue 和 Pull Request。在提交代码前，请确保类型检查和相关构建能够通过。

• GitHub 仓库
• Gitee 仓库
• 问题反馈

开源协议

MIT

Copyright © 2017-present Qiu

AI 辅助开发

组件元数据、MCP、Skill 和可运行业务模板见 AI 接入说明。