Component Library
Production-ready, theme-aware components built with semantic tokens. All components work seamlessly across all themes.
Buttons
Cards
Default Card
A default card with subtle shadow and surface background.
Elevated Card
An elevated card with stronger shadow and elevated surface.
Outlined Card
An outlined card with border and no shadow.
Alerts
Success!
Your changes have been saved successfully.
Warning
Please review your information before submitting.
Error
Something went wrong. Please try again.
Information
This is an informational message.
Badges
Variants
Default Primary Success Warning Error Info
Sizes
Small Medium Large
Inputs
This username is already taken
Pricing Table
Starter
Perfect for getting started
$9
/month
- Up to 5 projects
- Basic support
- Community access
- Documentation
Popular
Professional
For professionals and teams
$29
/month
- Unlimited projects
- Priority support
- Advanced features
- API access
- Custom integrations
Enterprise
For large organizations
$99
/month
- Everything in Professional
- Dedicated support
- Custom SLA
- On-premise deployment
- Training & onboarding
Modal
Sizes
Variants
Toast Notifications
Variants
With Actions
Accordion
Single Open (Default)
Multiple Open
Tabs
Default Variant
This is the overview tab content. It can contain any HTML content.
Pills Variant
Content for tab one.
DataTable
| Name | Role | Status | |
|---|---|---|---|
| John Doe | john@example.com | Admin | Active |
| Jane Smith | jane@example.com | User | Active |
| Bob Johnson | bob@example.com | User | Inactive |
| Alice Williams | alice@example.com | Editor | Active |
| Charlie Brown | charlie@example.com | User | Active |
Combined Example
New
Feature Announcement
We've just released a new component library! Check it out below.