Component Debugger
Buttons
Badges
Default
Secondary
Destructive
Outline
Alerts
Heads up!
You can add components to your app using the cli.
Error
Your session has expired. Please log in again.
Cards
Create project
Deploy your new project in one-click.
Inputs & Textareas
Checkbox & Switch
Progress
Tabs
Make changes to your account here.
Avatars
CN
JD
Skeleton
Table
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| Total | $2,500.00 | ||
Data Table
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Unpaid | Credit Card | $300.00 |
Text Components
标题变体
H1 标题 - 这是最大的标题
H2 标题 - 这是次大的标题
H3 标题 - 这是中等大小的标题
H4 标题 - 这是小标题
文本变体
这是段落文本 - 用于正文内容
这是引导文本 - 用于引言或重要说明
这是大文本 - 用于强调内容
这是小文本 - 用于辅助信息
这是弱化文本 - 用于次要信息
特殊文本
这是引用文本 - 用于引用他人观点
大小控制
小号文本 (sm)
中号文本 (md)
大号文本 (lg)
超大号文本 (xl)
2XL 文本
3XL 文本
4XL 文本
对齐方式
左对齐文本
居中对齐文本
右对齐文本
两端对齐文本 - 这是一个较长的文本示例，用于展示两端对齐的效果，文本会自动调整间距以填满整行。
字重控制
细体文本 (thin)
轻体文本 (light)
常规文本 (normal)
中等文本 (medium)
半粗体文本 (semibold)
粗体文本 (bold)
特粗体文本 (extrabold)
黑体文本 (black)
组合使用
组合使用示例 - 大标题居中粗体
这是一个组合使用的示例，展示了如何同时使用变体、大小、字重和对齐方式。 这种灵活性让文本组件能够适应各种设计需求。