# UI

[![](https://data.jsdelivr.com/v1/package/npm/@qttdev/ui/badge)](https://www.jsdelivr.com/package/npm/@qttdev/ui)

@qttdev/ui 是一个用 React 构建的基础组件库，旨在提供高质量、可复用的 UI 组件，帮助开发者快速构建现代 Web 应用。

Docs: [https://telviz.xaotos.cn/](https://telviz.xaotos.cn/)

![Showcase](https://cdn.jsdelivr.net/npm/@qttdev/ui@1.1.0-beta3/images/showcase.png)

## 特性

- 🌟 高度可定制：每个组件都可以根据需求进行定制。
- 🎨 使用 Tailwind CSS 生成样式：简化样式管理，提高开发效率。
- 🚀 性能优化：所有组件都经过性能优化，确保快速渲染。
- 📦 易于集成：与现有项目无缝集成，减少开发成本。
- 🛠️ TypeScript 支持：提供完整的 TypeScript 类型定义，提升开发体验。
- 🪶 轻量化组件设计：确保组件库的体积小，加载速度快。

## 安装

使用 npm 或 yarn 安装：

```bash
npm install @qttdev/ui
# 或者
yarn add @qttdev/ui
```

## 使用示例

以下是一个简单的使用示例：

```jsx
import React from "react";
import { Button, Alert } from "@qttdev/ui";

const App = () => (
  <div>
    <Alert type="success">This is a success alert!</Alert>
    <Button onClick={() => alert("Button clicked!")}>Click Me</Button>
  </div>
);

export default App;
```

## 主题支持

@qttdev/ui 支持多种主题，允许开发者根据项目需求自定义组件的外观。以下是一个简单的示例：

```jsx
import React from "react";
import { ThemeProvider } from "@qttdev/ui";
import customTheme from "./customTheme";

const App = () => (
  <ThemeProvider theme={customTheme}>
    <div>
      <Alert type="success">This is a success alert with a custom theme!</Alert>
      <Button onClick={() => alert("Button clicked!")}>Click Me</Button>
    </div>
  </ThemeProvider>
);

export default App;
```

在 `customTheme.ts` 文件中，你可以定义自己的主题：

```js
import base from "./base";
import { extend, ITheme } from "./utils";

const customTheme = extend(base, {
  primary: "hsl(120 100% 50%)",
  accent: "hsl(120 100% 50%)",
  destructive: "hsl(120 50% 50%)",
  ring: "hsl(120 100% 80%)",
}) as ITheme;

export default customTheme;
```

## 已支持组件库列表

| 基础组件列表                                       | 开发状态 |
| -------------------------------------------------- | -------- |
| [Accordion](./src/accordion/index.tsx)             | ✔️       |
| [Alert](./src/alert/index.tsx)                     | ✔️       |
| [Badge](./src/badge/index.tsx)                     | ✔️       |
| [Breadcrumb](./src/breadcrumb/index.tsx)           | ✔️       |
| [Card](./src/card/index.tsx)                       | ✔️       |
| [Carousel](./src/carousel/index.tsx)               | ✔️       |
| [Checkbox](./src/checkbox/index.tsx)               | ✔️       |
| [Collapse](./src/collapse/index.tsx)               | ✔️       |
| [Context Menu](./src/context-menu)                 | ✔️       |
| [Dialog](./src/dialog/index.tsx)                   | ✔️       |
| [Drawer](./src/drawer/index.tsx)                   | ✔️       |
| [DropdownMenu](./src/dropdown-menu/index.tsx)      | ✔️       |
| [Form](./src/form/index.tsx)                       | ✔️       |
| [Input](./src/input/index.tsx)                     | ✔️       |
| [Menubar](./src/menubar/index.tsx)                 | ✔️       |
| [Navigation Menu](./src/navigation-menu/index.tsx) | ✔️       |
| [Pagination](./src/pagination/index.tsx)           | ✔️       |
| [Popover](./src/popover/index.tsx)                 | ✔️       |
| [Progress](./src/progress/index.tsx)               | ✔️       |
| [RadioGroup](./src/radio-group/index.tsx)          | ✔️       |
| [Resizable](./src/resizable/index.tsx)             | ✔️       |
| [Select](./src/select/index.tsx)                   | ✔️       |
| [Switch](./src/switch/index.tsx)                   | ✔️       |
| [Table](./src/table/index.tsx)                     | ✔️       |
| [Tabs](./src/tabs/index.tsx)                       | ✔️       |
| [Textarea](./src/textarea/index.tsx)               | ✔️       |
| [Toast](./src/toast/index.tsx)                     | ✔️       |
| [Tooltip](./src/tooltip/index.tsx)                 | ✔️       |

## 贡献指南

欢迎贡献代码！请阅读 [贡献指南](./CONTRIBUTING.md) 了解如何参与项目开发。

## 许可证

[MIT](./LICENSE)