UI Components Demo
Button Variants and Sizes
Our button component supports different variants and sizes to fit various UI needs.
Button Variants
Button Sizes
Button States
Card Examples
Cards organize content into containers with different styles and configurations.
Card content goes here. This is a sample text to demonstrate how content appears within a card component.
Card Title
Card content goes here. This is a sample text to demonstrate how content appears within a card component.
Card Title
Card content goes here. This is a sample text to demonstrate how content appears within a card component.
Card Title
Card content goes here. This is a sample text to demonstrate how content appears within a card component.
Card Title
This card is clickable. Click to trigger an action.
Card Title
This card links to another page or section.
Modal Demonstration
Modals present content in a focused overlay window.
Toast Notifications
Toast notifications provide brief messages about app processes.
Toast Types
Toast Positions
Typography
Our typography system provides consistent text styles across the application.
Heading 1 (5xl)
Heading 2 (4xl)
Heading 3 (3xl)
Heading 4 (2xl)
Heading 5 (xl)
Heading 6 (lg)
Base paragraph text. This is the default text size used throughout the application.
Small text is used for secondary information and supporting content.
Extra small text for fine print and legal information.
Large text for emphasis and increased readability.
Light text weight (300)
Normal text weight (400)
Medium text weight (500)
Semibold text weight (600)
Bold text weight (700)
Extra bold text weight (800)
Color Palette
Our color system provides a consistent visual language across the application.
Primary Colors
Primary 50
#f0f9ff
Primary 100
#e0f2fe
Primary 200
#bae6fd
Primary 300
#7dd3fc
Primary 400
#38bdf8
Primary 500
#0ea5e9
Primary 600
#0284c7
Primary 700
#0369a1
Primary 800
#075985
Primary 900
#0c4a6e
Primary 950
#082f49
Secondary Colors
Secondary 50
#f5f3ff
Secondary 100
#ede9fe
Secondary 200
#ddd6fe
Secondary 300
#c4b5fd
Secondary 400
#a78bfa
Secondary 500
#8b5cf6
Secondary 600
#7c3aed
Secondary 700
#6d28d9
Secondary 800
#5b21b6
Secondary 900
#4c1d95
Secondary 950
#2e1065
Semantic Colors
Success
Error
Warning
Info
Gray Scale
Gray 50
Gray 100
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 800
Gray 900
Gray 950