DUI 设计系统

DUI（Design UI）是一个现代化、轻量级的设计系统，帮助团队快速构建一致的用户界面。它提供了一套完整的组件、工具和最佳实践。

为什么选择 DUI？

• 轻量高效： 核心仅 15KB gzipped，零运行时开销
• 现代化设计： 遵循最新的设计趋势，圆角、阴影、动效一应俱全
• TypeScript 原生： 完整的类型定义，开发体验极佳
• 主题灵活： CSS 变量系统，轻松定制品牌色
• 无障碍友好： 符合 WCAG 2.1 AA 标准

快速上手

只需三步，即可在你的项目中使用 DUI：

npm install @dui/core @dui/react
# 或
yarn add @dui/core @dui/react

然后在你的应用中导入：

import { Button, Card } from '@dui/react';
import '@dui/core/dist/style.css';

核心概念

DUI 围绕几个核心设计原则构建：

1. 组合优先

所有组件都遵循组合模式，你可以自由组合子组件来构建复杂的 UI：

<Card>
  <Card.Header>标题</Card.Header>
  <Card.Body>内容</Card.Body>
  <Card.Footer>操作</Card.Footer>
</Card>

2. 响应式设计

内置响应式断点，通过简单的 prop 即可控制不同屏幕下的表现：

<Grid cols={{ base: 1, md: 2, lg: 3 }}>
  <Card />
  <Card />
  <Card />
</Grid>

3. 主题系统

通过 CSS 变量覆盖默认主题，支持亮色/暗色模式切换：

:root {
  --dui-primary: #6366f1;
  --dui-radius: 8px;
}