DiShUI - 基于 daisyUI 和 Tailwind CSS 的 React 组件库

一个优雅、现代的 React UI 组件库，基于 daisyUI 和 Tailwind CSS 构建。

English | 简体中文

✨ 特性

• 🎨 优雅设计 - 基于 daisyUI，提供多种精美主题
• 📦 开箱即用 - 完整的 TypeScript 类型支持
• 🔧 灵活可定制 - 基于 Tailwind CSS，轻松定制样式
• 🚀 现代化 - 使用最新的 React 19 和 Vite 7
• 📱 响应式 - 完美支持移动端和桌面端
• 🎯 Tree Shaking - 自动优化打包大小
• 📖 丰富文档 - 详细的 API 文档和使用示例

📦 安装

# 使用 pnpm (推荐)
pnpm add dishui

# 使用 npm
npm install dishui

# 使用 yarn
yarn add dishui

🚀 快速开始

1. 配置 Tailwind CSS

在你的项目中配置 Tailwind CSS 和 daisyUI：

# 安装依赖
pnpm add -D tailwindcss daisyui

在 tailwind.config.js 中配置：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/dishui/dist/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "dark", "retro", "cyberpunk"],
  },
}

2. 导入样式和组件

import React from 'react';
import { Button, Badge, Card } from 'dishui';
import 'dishui/dist/dishui.css';

function App() {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">DiShUI UI 示例</h1>
      
      {/* 按钮示例 */}
      <div className="flex gap-2 mb-4">
        <Button variant="primary">主要按钮</Button>
        <Button variant="secondary">次要按钮</Button>
        <Button variant="accent">强调按钮</Button>
      </div>
      
      {/* 徽章示例 */}
      <div className="flex gap-2 mb-4">
        <Badge variant="primary">Primary</Badge>
        <Badge variant="success">Success</Badge>
        <Badge variant="warning">Warning</Badge>
      </div>
      
      {/* 卡片示例 */}
      <Card bordered>
        <Card.Body>
          <Card.Title>卡片标题</Card.Title>
          <p>这是一个卡片组件的示例内容。</p>
          <Card.Actions>
            <Button variant="primary">操作</Button>
          </Card.Actions>
        </Card.Body>
      </Card>
    </div>
  );
}

export default App;

📚 组件列表

基础组件

• Button - 按钮组件，支持多种样式和尺寸
• Badge - 徽章组件，用于标记和分类
• Input - 输入框组件，支持多种类型
• Label - 标签组件，用于表单标签
• Select - 下拉选择组件，支持单选和多选

数据展示

• Card - 卡片容器组件
• Table - 简单表格组件
• DataTable - 高级数据表格，支持排序、筛选、分页
• List - 列表组件

工具组件

• Demo - 示例展示组件

布局组件

• MainLayout - 主布局组件
• Sidebar - 侧边栏组件
• Navbar - 导航栏组件

🎨 主题

DiShUI 支持 daisyUI 的多种主题：

• light - 浅色主题
• dark - 深色主题
• retro - 复古主题
• cyberpunk - 赛博朋克主题
• customblue - 自定义蓝色主题
• ghibli - 吉卜力风格主题

你可以在运行时动态切换主题：

import { AppProvider, useAppContext } from 'dishui';

function ThemeSwitcher() {
  const { theme, setTheme } = useAppContext();
  
  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      <option value="light">浅色</option>
      <option value="dark">深色</option>
      <option value="retro">复古</option>
      <option value="cyberpunk">赛博朋克</option>
    </select>
  );
}

function App() {
  return (
    <AppProvider>
      <ThemeSwitcher />
      {/* 你的应用内容 */}
    </AppProvider>
  );
}

🔧 开发

# 克隆仓库
git clone https://github.com/yourusername/DishUI.git
cd DishUI

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建库
pnpm build

# 发布到 npm
pnpm run publish:npm

📖 文档

• 组件文档
• API 参考
• 开发指南
• 更新日志

🤝 贡献

欢迎贡献代码！请查看 贡献指南 了解详情。

📄 许可证

ISC License

🙏 致谢

• React - UI 框架
• Tailwind CSS - CSS 框架
• daisyUI - Tailwind CSS 组件库
• Vite - 构建工具
• TanStack Table - 表格解决方案

📮 联系

如果有任何问题或建议，欢迎提交 Issue 或 Pull Request。