ui-pattern-playbook
Version 1.6.0 - February 2026
Collection of examples from the playbook
4. Visual styles
Border-2 radius: badge (rounded-md), button, card (rounded-lg)
Card Title
Card content…
Interaction states: Rest, Hover, Active, Focus, Disabled
Selected state: Tabs, Card, Checkbox
Indicating interactivity: inline action, link, primary/secondary buttons
Complete patterns: Primary, Secondary, Semantic, Link, Interactive card
5. Status and health
Status color tokens: Ideal, Good, Neutral, Warning, Critical
Health indicator (shape), Chip, Message container
Service Unavailable
The API service is currently down. Our team has been notified.
Toast, Information overlay, Status highlight (border-l-4), Trend
Changes saved successfully
Database backup pending
Last backup: 36 hours ago
6. Navigation
Flat navigation
Breadcrumbs (nested)
Primary navigation (tabs), Secondary (sidebar)
Links: inline, nav with icon, external
Learn more in our .
1. Typography
Type scale: Display, Heading, Subheading, Body, Subtext
Main Headline
Section Title
Subsection
Main content text…
Helper text
Content rules: ellipsis, curly quotes, non‑breaking space
Loading… please wait
She said, "Hello world."
File size: 10 MB
Typography vertical spacing (space-y-1)
Heading
Subtitle
10. Empty States
No Data (First Use), User Action Result, Error Management
No patients yet
Connect your first data source to administrate users
No results found
Try adjusting your search terms or filters
Unable to load data
We're having trouble connecting to the server. Check the activity log for details.
11. Loading States
Skeleton states, Full-screen loading, Inline loading, Progressive loading
12. Modal Patterns
Confirm/Cancel, Destructive, Error Recovery, Permissions Request
Publish article
This article will be visible to all subscribers immediately.
Delete team member?
Removing Sarah Johnson will revoke her access immediately.
This action cannot be undone.
Connection lost
We couldn't save your changes because the connection was interrupted.
Each item uses a header/body/footer structure.