一个现代化、可访问且可定制的React UI组件库，使用TypeScript、Vite和Storybook构建。

• TypeScript优先：完整的TypeScript支持，包含全面的类型定义
• 可访问性：遵循WCAG指南，注重无障碍设计
• 可定制：使用CSS变量轻松实现主题定制
• 响应式设计：移动优先设计，在所有屏幕尺寸上无缝工作
• 完善的文档：使用Storybook提供交互式示例和详细文档
• 测试覆盖：所有组件均有单元测试，确保可靠性
• 现代技术栈：基于React 18、Vite和Storybook 8构建

npm install modern-ui-kit
# 或
yarn add modern-ui-kit
# 或
pnpm add modern-ui-kit

import React from 'react';
import { Button, Input, Card, ThemeProvider } from 'modern-ui-kit';
import 'modern-ui-kit/style.css';

function App() {
  return (
    <ThemeProvider>
      <div className="app">
        <Card>
          <h1>欢迎使用 Modern UI Kit</h1>
          <Input placeholder="请输入您的姓名" label="姓名" />
          <Button variant="primary" className="mt-4">
            开始使用
          </Button>
        </Card>
      </div>
    </ThemeProvider>
  );
}

export default App;

一个功能丰富的按钮组件，支持多种变体和尺寸。

<Button variant="primary" size="md" onClick={() => console.log('点击了！')}>
  主要按钮
</Button>

属性：

• variant: primary | secondary | success | danger | warning | info | outline | ghost
• size: sm | md | lg | xl
• type: button | submit | reset
• disabled: boolean
• loading: boolean
• fullWidth: boolean
• icon: React.ReactNode
• iconPosition: left | right

一个灵活的输入框组件，支持验证状态。

<Input
  label="邮箱"
  type="email"
  placeholder="请输入您的邮箱"
  required
  error={!!emailError}
  errorMessage={emailError}
  onChange={(e) => setEmail(e.target.value)}
/>

属性：

• type: text | password | email | number | tel | url | search
• size: sm | md | lg
• variant: default | filled | outline
• disabled: boolean
• required: boolean
• readOnly: boolean
• error: boolean
• success: boolean
• leftIcon: React.ReactNode
• rightIcon: React.ReactNode

一个容器组件，支持多种变体和阴影效果。

<Card variant="elevated" shadow="lg">
  <CardHeader>
    <h3>卡片标题</h3>
  </CardHeader>
  <CardBody>
    <p>卡片内容</p>
  </CardBody>
  <CardFooter>
    <Button variant="primary" size="sm">操作</Button>
  </CardFooter>
</Card>

属性：

• variant: default | elevated | outlined | filled
• shadow: sm | md | lg | xl | none
• borderRadius: sm | md | lg | xl | full
• fullWidth: boolean

一个灵活的模态框组件，支持交互功能。

<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
  <ModalHeader>
    <h3>模态框标题</h3>
  </ModalHeader>
  <ModalBody>
    <p>模态框内容</p>
  </ModalBody>
  <ModalFooter>
    <Button onClick={() => setIsModalOpen(false)}>关闭</Button>
  </ModalFooter>
</Modal>

属性：

• isOpen: boolean (必填)
• onClose: () => void (必填)
• size: sm | md | lg | xl | full
• variant: default | centered | fullscreen
• showCloseButton: boolean
• closeOnOverlayClick: boolean
• closeOnEscape: boolean

Modern UI Kit 支持使用CSS变量或 ThemeProvider 组件轻松定制主题。

:root {
  --primary-color: #6366f1;
  --primary-hover: #4f46e5;
  --secondary-color: #64748b;
  /* 添加更多自定义变量 */
}

import { ThemeProvider, defaultTheme } from 'modern-ui-kit';

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#6366f1',
    primaryHover: '#4f46e5',
  },
};

function App() {
  return (
    <ThemeProvider initialTheme={customTheme}>
      {/* 您的应用内容 */}
    </ThemeProvider>
  );
}

使用Storybook探索所有组件的交互式示例：

npm run storybook

访问 Storybook文档 查看在线版本。

详细的API文档，请参考 组件API参考。

• Node.js 18+
• npm, yarn 或 pnpm

# 克隆仓库
git clone https://github.com/yourusername/modern-ui-kit.git
cd modern-ui-kit

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 启动Storybook
npm run storybook

# 运行测试
npm run test

# 构建项目
npm run build

modern-ui-kit/
├── src/
│   ├── components/          # UI组件
│   │   ├── Button/         # 按钮组件
│   │   ├── Input/          # 输入框组件  
│   │   ├── Card/           # 卡片组件
│   │   └── Modal/          # 模态框组件
│   ├── styles/             # 全局样式
│   ├── types/              # 类型定义
│   ├── utils/              # 工具函数
│   └── index.ts            # 主入口文件
├── .storybook/             # Storybook配置
├── dist/                   # 构建输出目录
├── package.json            # 项目配置
├── tsconfig.json           # TypeScript配置
├── vite.config.ts          # Vite配置
└── README.md               # 项目文档

Modern UI Kit 使用 Vitest 和 React Testing Library 进行测试。

# 运行所有测试
npm run test

# 运行测试并生成覆盖率报告
npm run test:coverage

# 在监视模式下运行测试
npm run test:watch

欢迎贡献代码！在提交拉取请求前，请阅读我们的 贡献指南。

1. Fork 仓库
2. 创建新分支 (git checkout -b feature/your-feature)
3. 进行修改
4. 运行测试 (npm run test)
5. 运行代码检查 (npm run lint)
6. 提交更改 (git commit -m '添加新功能')
7. 推送分支 (git push origin feature/your-feature)
8. 打开拉取请求

Modern UI Kit 使用 MIT License 许可证。

• Bug报告: Issues
• 功能请求: Discussions
• 问题咨询: Stack Overflow

• 灵感来自 Material-UI、Chakra UI 和 Tailwind CSS 等流行UI库
• 使用现代Web技术构建
• 注重无障碍设计

• 添加更多组件（Dropdown、Select、DatePicker等）
• 添加深色模式支持
• 添加更多表单组件
• 添加布局组件
• 添加动画工具
• 完善文档
• 添加更多示例和使用指南

查看 更新日志 获取最新更新。

• 雪希希 - 创作者和维护者

---

使用 React、TypeScript 和 Vite 构建 ❤️