Design System Showcase
Patterns
Common UI compositions demonstrating how to combine components for real-world use cases.
Data Table
Table with search, sortable headers, row actions, and pagination.
| Status | Role | Amount | ||||
|---|---|---|---|---|---|---|
| Alice Johnson | alice@example.com | Active | Admin | $2,500.00 | ||
| Bob Smith | bob@example.com | Pending | User | $1,250.00 | ||
| Carol Williams | carol@example.com | Active | User | $3,100.00 | ||
| David Brown | david@example.com | Inactive | User | $890.00 | ||
| Eva Martinez | eva@example.com | Active | Moderator | $1,750.00 |
Showing 1-5 of 42 results
Empty State (when no results)
No results found
Try adjusting your search or filter to find what you're looking for.
Form Pattern
Complete form with validation, different input types, and submit states.
Card Layouts
Different card arrangements and variations.
3 Column Grid
Card 1
A brief description of this card.
Card content goes here. This could be any type of content.
Card 2
A brief description of this card.
Card content goes here. This could be any type of content.
Card 3
A brief description of this card.
Card content goes here. This could be any type of content.
Interactive Cards (Hover Effect)
Documents
42
files
Images
42
files
Videos
42
files
Music
42
files
Stat Cards
Total Revenue
$45,231.89
+20.1% from last month
Subscriptions
+2,350
+180.1% from last month
Sales
+12,234
+19% from last month
Active Now
+573
+201 since last hour
Empty States
Placeholder content when no data is available.
No messages
You don't have any messages yet.
No projects
Get started by creating a new project.
Loading States
Skeleton loaders and spinners for content placeholders.
Card Skeleton
List Skeleton
Table Skeleton
Button Loading States
Centered Loading
Loading content...