Loading...
Loading...
Loading...
Thumb (default)
Thumb Solid
Full
Full Solid
Headings
Text Variants
XL Text (20px) - Large body text
Large Text (18px) - Subtitle from Figma design
Medium Text (16px) - Default body text
Small Text (14px) - Navigation and labels
XS Text (12px) - Captions and meta info
Primary colored text
Accent colored text
Italic text variant
Primary Buttons
Secondary Buttons
Outline Buttons
Other Variants
Figma Design Recreation
Pure White
#FFFFFF
Robin Blue
#59B5FF
Royal Blue
#0952C2
Spark
#8FDFFF
Lavender
#A0A9E4
Midnight
#001534
Void
#020923
Hero Section (text-section-brand)
Components inherit white color from parent section automatically
Only override when needed (like this lavender subtitle)
Light Section (text-section-light)
Dark text automatically inherited from section class
Perfect for light backgrounds and content areas
Muted text for captions and secondary info
Brand Section (text-section-brand)
Clean white text inherited from brand section
No need to specify color="white" on every component
Hours saved monthly
Portfolio growth
New doors yearly
Mixed Content Sections
Content inherits white text
All components get the same color
Content inherits dark text
Automatic color switching
Error Boundary Protection
Error boundaries protect marketing forms and components from crashes:
✅ This component is working properly
Form submission states and validation errors:
❌ Form Submission Failed
Failed to send message. Please try again.
⚠️ Field Validation Error
Please enter a valid email address.
✅ Message Sent Successfully
We'll get back to you within 24 hours.
Loading Spinners
Small Default
Medium Brand
Large White
XL Muted
Skeleton Loading Components
Skeleton Card:
Skeleton Text (3 lines):
Skeleton Header:
Skeleton Navigation:
Loading Overlay
Content behind loading overlay...
Loading content...
Form Field States
This is helper text
This field is required
Looks good!
This field is required
This field is disabled
250/500 characters
Newsletter Signup Form Demo
We'll never share your email
Optional
Basic Dropdown
Dropdown with Icon
Dropdown States
Please select an option from the dropdown
This field cannot be edited
Error & Validation States
This field is required
Choose your preferred billing cycle
Real-World Example: Contact Form
Basic Radio Buttons
Unselected State
Pre-selected State
Radio Button States
Active States
Disabled States
Radio Button Groups
Pricing Plans
Property Type
Figma Design Recreation
Radio buttons matching the exact Figma design:
Button Loading States
Accessibility Features
Loading spinner with ARIA label for screen readers
Button with aria-describedby relationship
Error message with proper ARIA roles for announcements