Boilerplate

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.

EmailStatusRoleAmount
Alice Johnsonalice@example.comActiveAdmin$2,500.00
Bob Smithbob@example.comPendingUser$1,250.00
Carol Williamscarol@example.comActiveUser$3,100.00
David Browndavid@example.comInactiveUser$890.00
Eva Martinezeva@example.comActiveModerator$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.

We'll never share your email with anyone else.

By checking this box, you agree to our Terms of Service and Privacy Policy.

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...