UI Components Demo
Loading states, skeletons, animations, empty states, and more
1. Buttons with Loading States
2. Toast Notifications
3. Cards with Hover Effects
Hover Card
Hover over me to see the effect
Interactive Card
Click me for interaction feedback
Loading Card
Toggle the loading state
Success
Operation completed
Warning
Please review
Error
Something went wrong
4. Skeleton Loading States
Basic Skeletons
Stat Cards
Card Skeleton
Tech Status Card
List Skeleton
Route Stops
Invoice List
Table Skeleton
Calendar Skeleton
5. Spinners & Loaders
XS
SM
MD
LG
XL
Loading data...
6. Empty States
No customers yet
Get started by adding your first customer. They'll appear here once added.
No invoices yet
Create your first invoice to start tracking payments from customers.
You're all caught up!
No alerts or issues need your attention right now.
No results found
We couldn't find anything matching your search. Try different keywords.
7. Error States
Something went wrong
We're sorry, but something unexpected happened. Please try again.
8. Animations
Animated List
Item 1
Item 2
Item 3
Animated Cards (staggered)
Animated card 1
Animated card 2
Animated card 3
Slide Animations
Slide Up
Slide Down
Slide Left
Slide Right