Preview: Components
Theme changes apply in real-time
Buttons
All button variants and sizes
Badges
Status and label indicators
DefaultSecondaryDestructiveOutline
CompleteInfoErrorWarning
Cards
Content containers with various layouts
Basic Card
A simple card with header and content
This is the card content area where you can add any content you need.
Card with Footer
Includes actions in the footer
Cards can have footers with action buttons.
Small Card
Compact variant
Smaller padding for tighter layouts.
Interactive Card
Hover for shadow effect
Cards can be styled for interactive states.
Form Elements
Inputs, textareas, and selects
Sample Contact Form
A complete form example
Alerts
Informational and warning messages
Information
This is an informational alert to provide context or helpful tips.
Success
Your changes have been saved successfully.
Warning
Please review the changes before proceeding.
Error
Something went wrong. Please try again or contact support.