UI Component Library
Showcase of all reusable components built with bits-ui and Tailwind CSS
Buttons
Variants
Sizes
States
Full Width
Badges
Variants
Default Primary Success Warning Danger
Sizes
Small Medium Large
Alerts
Information
This is an informational alert with important details.
Success
Your changes have been saved successfully! This alert is dismissible.
Warning
Please review your input before proceeding.
Error
An error occurred while processing your request.
Toast Notifications
Click the buttons below to see toast notifications appear in the top-right corner.
Input Fields
We'll never share your email
Loading States
Spinners
Spinner with Text
Loading your data...
Skeletons
Empty States
No messages yet
When you receive messages, they'll appear here. Start a conversation to get started!
Cards
Standard Card
Basic card with default styling and padding.
Hover Card
This card has hover effects. Try hovering over it!
Gradient Card
Features a subtle gradient background.
Usage
Import components from the UI library:
import {
Button,
Card,
Input,
Alert,
Badge,
LoadingSpinner,
Skeleton,
EmptyState
} from '$lib/components/ui';
import { toast } from '$lib/stores/toast';All components are built with:
- bits-ui - Headless UI primitives
- Tailwind CSS - Utility-first styling
- Svelte 5 Runes - Modern reactivity
- TypeScript - Full type safety
- Dark Mode - Automatic theme support
- Accessibility - ARIA labels and semantic HTML