This page previews all reusable UI components. Add new components to the registry at src/design-system/registry.tsx.
Button component with primary, outlined, and disabled variants
Input component with label and error states
This field is required
Comprehensive typography component with full configuration options
This is a paragraph with normal text.
This is inline span text.This is strong text.This is emphasized text.const example = 'code';Extra Small (12px)
Small (14px)
Base (16px)
Large (18px)
Extra Large (20px)
2X Large (24px)
3X Large (30px)
4X Large (36px)
5X Large (48px)
6X Large (60px)
Thin (100)
Extra Light (200)
Light (300)
Normal (400)
Medium (500)
Semibold (600)
Bold (700)
Extra Bold (800)
Black (900)
Black
White
Secondary
Disabled
Primary
Success
Warning
Error
Info
Gray 500
Red 500
Green 500
Blue 500
Left aligned text
Center aligned text
Right aligned text
Justified text that spreads across the full width of the container.
Normal case text
Uppercase text
LOWERCASE TEXT
capitalize each word
No decoration
Underlined text
Strikethrough text
Overlined text
This is a very long text that will be truncated with ellipsis when it exceeds the container width.
Clickable text (hover to see effect)
Non-selectable text
Preformatted text with line breaks and spaces preserved
Button Text Size
Label Size
Title Size
Subtitle Size
Tabs component with active/inactive states
Complete login form with all components integrated
Choose your login method