Chapter 06 · 17 entries

UI Patterns.

Reusable solutions to common design problems. Tested by millions of users — users already know how they work. Learning these patterns means you can describe exactly what you need when prompting an AI builder.

6.1
Hero Section
The first 3-second pitch. Badge, gradient headline, two CTAs, trust row.
View demo
6.2
Pricing Table
3 tiers, monthly/annual toggle, highlighted pro plan.
View demo
6.3
Testimonials / Marquee
Dual-row infinite scroll, opposite directions. Hover to pause.
View demo
6.4
Accordion / FAQ
Click to expand. Single-open behavior. Live search filter.
View demo
6.5
Modal / Dialog
Overlay, scale-in animation, Escape to close, body scroll lock.
View demo
6.6
Card Component
Blog card grid. Hover lift, line clamps, meta row.
View demo
6.7
Toast Notification
Stacking corner toasts with auto-dismiss bar. Sonner pattern.
View demo
6.8
Skeleton Loader
Shimmering placeholder shapes while content loads. Polite alternative to spinners.
View demo
6.9
Avatar Stack
Overlapping circles + "+N more". Hover for tooltip, spreads on hover.
View demo
6.10
Stat / KPI Card
Dashboard metric tile with delta pill, sparkline, and 2× featured variant.
View demo
6.11
Toggle Switch
4 toggle styles — iOS, Material, icon-on-knob, knurled chunky.
View demo
6.12
File Upload Dropzone
Drag & drop real files, type detection, fake upload progress bars.
View demo
6.13
Data Table
Sortable headers, search filter, row selection + bulk action, pagination.
View demo
6.14
Empty State
5 variants — first-time, zero results, inbox zero, error, no access.
View demo
6.15
Tag / Chip Input
Gmail "To:" recipients pattern with autocomplete, validation, color cycle.
View demo
6.16
Range Slider
Single + dual-thumb with live histogram. The Airbnb price filter pattern.
View demo
6.17
Image Compare
Before/after wipe slider with drag handle and keyboard arrows.
View demo