组件

DUI 提供 30+ 高质量组件，覆盖大多数 UI 场景。以下是核心组件概览：

基础组件

• Button - 按钮，支持多种变体和尺寸
• Input - 文本输入框
• Select - 下拉选择
• Checkbox - 复选框
• Radio - 单选框
• Textarea - 多行文本

数据展示

• Table - 表格，支持排序、筛选
• Card - 卡片容器
• Badge - 徽章标签
• Avatar - 头像
• Progress - 进度条
• Skeleton - 骨架屏

布局

• Grid - 响应式网格
• Flex - Flex 容器
• Stack - 堆叠布局
• Divider - 分割线
• Container - 容器

反馈

• Alert - 警告提示
• Toast - 消息通知
• Modal - 模态框
• Tooltip - 工具提示
• Progress - 进度指示器

使用示例

import { Button, Card, Input } from '@dui/react';

function Example() {
  return (
    <Card>
      <Input placeholder="请输入…" />
      <Button variant="primary">确定</Button>
    </Card>
  );
}

自定义组件

DUI 支持通过 createComponent 创建自定义组件，自动获得主题和样式：

import { createComponent } from '@dui/core';

const MyButton = createComponent('button', {
  base: 'px-4 py-2 rounded',
  variants: {
    primary: 'bg-blue-600 text-white',
    secondary: 'bg-gray-200 text-gray-800'
  }
});