@0xchain/ui

这是一个使用 Tailwind CSS 构建的现代化 UI 组件库。

安装

npm install @0xchain/ui
# 或
yarn add @0xchain/ui
# 或
pnpm add @0xchain/ui

使用方法

导入整个库

import { Button, Card, Input } from '@0xchain/ui';

按需导入单个组件

你也可以按需导入单个组件，这样可以减少打包体积：

// 导入单个组件
import { Button } from '@0xchain/ui/button';
import { Card } from '@0xchain/ui/card';
import { Input } from '@0xchain/ui/input';
import { Dialog } from '@0xchain/ui/dialog';
import { Form } from '@0xchain/ui/form';

可用的组件入口

• @0xchain/ui/accordion - 手风琴组件
• @0xchain/ui/alert - 警告组件
• @0xchain/ui/alert-dialog - 警告对话框
• @0xchain/ui/aspect-ratio - 宽高比组件
• @0xchain/ui/avatar - 头像组件
• @0xchain/ui/badge - 徽章组件
• @0xchain/ui/breadcrumb - 面包屑导航
• @0xchain/ui/button - 按钮组件
• @0xchain/ui/calendar - 日历组件
• @0xchain/ui/card - 卡片组件
• @0xchain/ui/carousel - 轮播图组件
• @0xchain/ui/checkbox - 复选框组件
• @0xchain/ui/collapsible - 可折叠组件
• @0xchain/ui/command - 命令组件
• @0xchain/ui/context-menu - 上下文菜单
• @0xchain/ui/dialog - 对话框组件
• @0xchain/ui/dropdown-menu - 下拉菜单
• @0xchain/ui/form - 表单组件
• @0xchain/ui/hover-card - 悬停卡片
• @0xchain/ui/input - 输入框组件
• @0xchain/ui/label - 标签组件
• @0xchain/ui/menubar - 菜单栏
• @0xchain/ui/navigation-menu - 导航菜单
• @0xchain/ui/pagination - 分页组件
• @0xchain/ui/popover - 弹出框组件
• @0xchain/ui/progress - 进度条组件
• @0xchain/ui/radio-group - 单选按钮组
• @0xchain/ui/resizable - 可调整大小组件
• @0xchain/ui/scroll-area - 滚动区域
• @0xchain/ui/select - 选择器组件
• @0xchain/ui/separator - 分隔符组件
• @0xchain/ui/sheet - 侧边栏组件
• @0xchain/ui/skeleton - 骨架屏组件
• @0xchain/ui/slider - 滑块组件
• @0xchain/ui/sonner - 通知组件
• @0xchain/ui/switch - 开关组件
• @0xchain/ui/table - 表格组件
• @0xchain/ui/tabs - 标签页组件
• @0xchain/ui/textarea - 文本域组件
• @0xchain/ui/toggle-group - 切换按钮组
• @0xchain/ui/toggle - 切换按钮
• @0xchain/ui/tooltip - 工具提示

样式

确保在你的项目中引入了 Tailwind CSS：

@import '@0xchain/ui/styles.css';

开发

# 安装依赖
pnpm install

# 构建库
pnpm build

# 运行测试
pnpm test

# 运行 Storybook
pnpm storybook