快速开始

让我们在 5 分钟内创建一个 DUI 应用。

1. 初始化项目

如果你是新项目,推荐使用官方脚手架:

npx create-dui@latest my-app
cd my-app
npm install
npm run dev

2. 手动集成

如果你想在现有项目中添加 DUI:

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

export default function App() {
  return (
    <div className="container">
      <Card>
        <h2>欢迎使用 DUI</h2>
        <Input placeholder="输入内容…" />
        <Button variant="primary">提交</Button>
      </Card>
    </div>
  );
}

3. 配置主题(可选)

src/styles/dui.css 中自定义主题:

:root {
  --dui-primary: #8b5cf6;
  --dui-radius-md: 16px;
  --dui-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

4. 启动开发服务器

npm run dev

访问 http://localhost:3000,你的 DUI 应用就跑起来了!

下一步: 了解 组件库 的所有可用组件,或者阅读 主题定制 指南。