open-index/open-npm huggingface dataset:
npm package: @stcn52/quick-ui
Description: 一个基于 React 和 Tailwind CSS 的现代 UI 组件库。
Latest version: 1.0.9

# @stcn52/quick-ui

一个基于 React 和 Tailwind CSS 的现代 UI 组件库。

## 安装

```bash
npm install @stcn52/quick-ui
# 或
pnpm add @stcn52/quick-ui
# 或
yarn add @stcn52/quick-ui
```

## 快速开始

### 1. 导入样式

在你的项目根文件中导入样式：

```tsx
// 在你的 main.tsx 或 App.tsx 中
import '@stcn52/quick-ui/styles'
```

### 2. 配置 Tailwind CSS

如果你的项目使用 Tailwind CSS，需要在 `tailwind.config.js` 中添加组件库的路径：

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@stcn52/quick-ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

### 3. 使用组件

```tsx
import { Button, Input, Card } from '@stcn52/quick-ui'

function App() {
  return (
    <div className="p-8">
      <Card className="w-96 p-6">
        <h2 className="text-xl font-semibold mb-4">登录</h2>
        <div className="space-y-4">
          <Input placeholder="请输入用户名" />
          <Input type="password" placeholder="请输入密码" />
          <Button className="w-full">登录</Button>
        </div>
      </Card>
    </div>
  )
}
```

## 组件列表

### 基础组件 (Foundation)
- `Button` - 按钮组件

### 表单组件 (Forms)
- `Input` - 输入框
- `Textarea` - 多行文本输入
- `Select` - 下拉选择器
- `Checkbox` - 复选框
- `RadioGroup` - 单选组组件
- `Switch` - 开关
- `Label` - 标签

### 反馈组件 (Feedback)
- `Progress` - 进度条
- `Badge` - 徽标

### 导航组件 (Navigation)
- `Tabs` - 标签页
- `Sidebar` - 侧边栏

### 浮层组件 (Overlays)
- `Dialog` - 对话框
- `Popover` - 气泡卡片
- `Tooltip` - 文字提示
- `Dropdown` - 下拉菜单
- `Command` - 命令菜单

### 数据展示 (Data Display)
- `Card` - 卡片
- `Avatar` - 头像
- `Table` - 表格

### 工具组件 (Utility)
- `ScrollArea` - 滚动区域
- `Collapsible` - 可折叠组件

## 主题定制

组件库支持 CSS 变量进行主题定制。你可以在你的 CSS 文件中覆盖这些变量：

```css
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 240 9% 89%;
  --primary-foreground: 240 5.9% 10%;
  /* 更多变量... */
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  /* 更多变量... */
}
```

## TypeScript 支持

本组件库完全支持 TypeScript，包含完整的类型定义。

## 版本说明

### v1.0.9 (当前版本)
- 📦 优化构建配置，支持 ES 和 CommonJS 双模块格式
- 🔧 改进 exports 配置，提供更好的模块兼容性
- 🎨 添加 sideEffects 配置，优化打包体积
- 🐛 修复样式文件导入问题
- ⚡ 升级依赖版本，提升性能和稳定性

### 查看完整更新日志

```bash
npm view @stcn52/quick-ui version
```

详细的更新记录请查看 [CHANGELOG.md](./CHANGELOG.md)

## 更新指南

### 升级到最新版本

```bash
npm update @stcn52/quick-ui
# 或
pnpm update @stcn52/quick-ui
```

**当前版本特性：**
- 支持 ES Module 和 CommonJS 双模块格式
- 优化的样式加载方式
- 更好的 TypeScript 类型支持
- 兼容 React 16.8+ 版本

## 开发路线图

### 即将发布 (v1.1.x)
- 🎨 更多主题预设
- 📱 移动端响应式优化
- 🌐 国际化支持
- 🧪 更多组件（Calendar、DatePicker、Upload 等）

### 计划中 (v1.2.x)
- 🎭 动画系统增强
- 🎯 无障碍访问性改进
- 📊 图表组件
- 🔌 插件系统

## 贡献

欢迎贡献代码！请查看 [CONTRIBUTING.md](./CONTRIBUTING.md) 了解详细信息。

### 开发环境

```bash
# 克隆项目
git clone https://github.com/stcn52/quick-ui.git
cd quick-ui

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建组件库
pnpm build:lib

# 运行 Storybook
pnpm storybook
```

## 许可证

MIT License