UI Components Demo
Showcasing custom theme colors: Primary (#0088cc), Brand (#006060), Accent (#EDAE49).
Buttons
Solid and outline variants with custom colors.
Solid
Outline
With icons
Badges
Status indicators with custom colors.
Cards
Custom Card component variants.
Default Card
Neutral container for content.
Dark Card
High-contrast info
Primary Card
Brand-tinted surface
Secondary Card
Alternate tint
Featured Card
Emphasized highlight
Use sparingly for featured content.
Gradient Card
Top-left to bottom-right gradient with 10% lightness
Brand Card
Brand-colored surface
Light Card
Light gray surface
White Card
Clean white surface
Custom Styled Cards
Cards with custom background, border, and styling props.
Custom Background
Card with custom purple background
Custom Border
Card with custom border color and style
Custom Gradient
Card with custom gradient background
Custom Shadow
Card with enhanced shadow
Custom Padding
Card with custom padding
Custom Border Radius
Card with custom border radius
Loaders
Spinners, skeletons, and progress bars.
Spinner Sizes & Colors
Sizes
With Labels
Loading...
Spinner Variants
Default
Primary
Brand
Accent
Gray
Red
Green
Skeleton Text
Skeleton Card
Progress Bars
Default Progress
Primary Color
Brand Color
Accent Color
Indeterminate
With Custom Height
Alerts
Dismissible status messages with custom colors.
Messages
Dismissible toast-style messages for notifications.
Success Message
✓ Operation completed successfully!
Info Message
ℹ New updates are available.
Warning Message
⚠ Please review your input.
Error Message
✗ Something went wrong. Try again.
Toast Notifications
Built-in Chakra UI toast system for user feedback.