Component Showcase
A comprehensive showcase of all UI components
Buttons
Badges
Form Elements
You typed: Nothing yet
You typed: Nothing yet
Progress
Avatars
Slider
Value: 50
Skeleton Loading
Accordion
Table
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
Dialog
Dropdown Menu
Typography & Fonts
"The best way to predict the future is to invent it."
Sans Serif - Inter
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
This is our primary UI font used for all interface elements.
Serif - Merriweather
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Perfect for editorial content, quotes, and emphasis.
Monospace - JetBrains Mono
The quick brown fox jumps
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
const greeting = "Hello, World!"; Ideal for code snippets and technical values.
Font Weights
Thin (100)
Extra Light (200)
Light (300)
Normal (400)
Medium (500)
Semibold (600)
Bold (700)
Extra Bold (800)
Black (900)
Text Sizes
Extra Small (xs)
Small (sm)
Base
Large (lg)
Extra Large (xl)
2XL
3XL
4XL