组件库

UI Components

基于 Radix UI + Tailwind CSS 构建的 20 个通用组件，支持主题定制和无障碍访问。

风格预览

查看这些组件在不同风格下的样式

选择一个风格查看组件预览

Button

按钮组件，支持多种变体和尺寸

Input

输入框组件，支持多种变体

Card

卡片组件，用于内容分组

Default Card

带边框的默认卡片样式

卡片内容区域

Elevated Card

带阴影的悬浮卡片

卡片内容区域

Ghost Card

无边框的透明卡片

卡片内容区域

Alert

警告提示组件

默认提示

这是一条默认的提示信息。

信息

这是一条信息提示。

成功

操作已成功完成。

警告

请注意潜在的问题。

错误

操作失败，请重试。

Loading & Progress

加载和进度指示器

加载中...

60%

Modal & Tooltip

弹窗和提示组件

Table

数据表格组件

名称	类型	状态	操作
Neo-Brutalist	设计风格	已发布
Glassmorphism	设计风格	已发布
Bento Grid	布局风格	已发布

Drawer & Popover

抽屉和弹出层组件

Toast

消息提示组件

List

列表组件

文档标题
这是文档的描述信息
2024
文件夹
包含 12 个项目
图片文件
PNG 格式，2.4 MB

Pagination

分页组件

Tree

树形结构组件

Button.tsx

Card.tsx

App.tsx

index.tsx

Input OTP

验证码输入组件，支持数字和字母数字模式

6 位数字验证码

4 位验证码

字母数字混合

密码遮罩

错误状态

禁用状态

Resizable

可调整大小的面板组件，支持水平和垂直布局

水平布局

左侧面板 (30%)

中间面板 (40%)

右侧面板 (30%)

垂直布局

顶部面板

底部面板

嵌套布局

侧边栏

主内容区

终端/面板

简洁分隔线

面板 A

面板 B