Component Showcase
Preview all available UI components and their variants
Headings
Heading 1 - 4xl Bold
Heading 2 - 3xl Semibold
Heading 3 - 2xl Semibold
Heading 4 - xl Semibold
Heading 5 - lg Semibold
Heading 6 - base Semibold
Subheadings
Subheading Large - lg Medium
Subheading Base - base Medium
Subheading Small - sm Medium
Body Text
This is regular body text with base size and comfortable line height. It's perfect for paragraphs and longer content that needs to be easily readable.
This is smaller body text with muted color. It's great for secondary information, captions, or supporting text.
This is extra small text, typically used for labels, timestamps, or very fine print.
Text Styles
Bold text and italic text and underlined text
Inline code can be used for technical terms
Link text with hover effects
Lists
Unordered List
- First item
- Second item
- Third item with longer text that wraps
Ordered List
- First numbered item
- Second numbered item
- Third numbered item
Blockquote
"This is a blockquote example. It's used to highlight important quotes or call attention to specific content."
Basic Card
This is the card content area where you can place any content.
Card with Footer
Content area with footer actions below.
Card with Header Action
This card has an action button in the top-right corner of the header.
Compact Card
A more compact card layout.
Text Input
Textarea
Select
Input States
Variants
With Icons
Usage Examples
Default Alert
Destructive Alert
Success Alert
Warning Alert
Alert without Icon
Checkboxes
Switches
Radio Groups
Disabled Radio Group
Horizontal Separator
Content above
Content below
Vertical Separator
In Card Layout
Content separated by a separator line.
Basic Dialog
Form Dialog
Basic Popover
Form Popover
Basic Tooltip
With Icons
Different Positions
Basic Table
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
Table with Footer
| Product | Quantity | Price | Total |
|---|---|---|---|
| Product A | 2 | $50.00 | $100.00 |
| Product B | 1 | $75.00 | $75.00 |
| Product C | 3 | $25.00 | $75.00 |
| Total | $250.00 | ||
Compact Table
| Name | Role | |
|---|---|---|
| John Doe | john@example.com | Admin |
| Jane Smith | jane@example.com | User |
| Bob Johnson | bob@example.com | Editor |