Patterns
Patterns
Whole apps, each on its own URL, built only from what this library exports.
Single components tell you what a thing does. They do not tell you what a screen made of them feels like — whether the density is right, whether the app bar and the table agree about their edges, whether a filter bar reads as part of the list below it.
So there are twenty-five complete apps at [/patterns](/patterns). Not embedded demos: each one has its own URL and fills the window, because a layout you are judging cannot share the viewport with a documentation sidebar. Open one on a phone and it is the same app, laid out for a phone — no second set of styles.
Most of them are an app you already know rebuilt from this catalogue — a feed, a swipe deck, a player, a code host, a till. That is deliberate: you already know what those are supposed to feel like, which makes them a much harder test than a screen invented to flatter the components on it.
The ones you already know
| Pattern | What it exercises |
|---|---|
| Social Feed | Feed, composer, tabs, pull-to-refresh, menus |
| Messenger | Conversation, composer, emoji, swipe actions |
| Dating Swipes | A pointer-driven swipe deck, dialogs, range sliders |
| Music Player | Now playing, queue, slider, island |
| Video Streaming | Video player, poster rows, tabs, episode list |
| Photo Library | Masonry, image viewer, selection, albums |
| Notes and Docs | Tree view, rich text, table of contents |
| Stay Booking | Search, facets, map, carousel, booking |
| Food Delivery | Menu, basket, order tracking, sheets |
| Banking App | Cards, transactions, charts, transfer form |
| Trading Desk | Candlesticks, order book, live data, order form |
| Code Hosting | Tree view, diff viewer, code block, activity graph |
| Issue Tracker | List and board, command palette, filters |
The rest of the shelf
| Pattern | What it exercises |
|---|---|
| Admin Console | App shell, table, charts, command palette, sheets |
| Support Inbox | Resizable panes, page transitions, emoji, composer |
| Restaurant Till | Dense touch targets, receipt, held tickets, right-to-left |
| Project Board | Drag and drop, chips, checklists, sheets |
| Online Shop | Carousel, image viewer, facets, cart, empty states |
| Account Settings | Ten sections, switches, live theme settings, devices |
| Delivery Dispatch | Map, markers, geofences, live data |
| Ride Hailing | Map, a trip that runs, bottom sheet, fare, rating |
| Fitness Tracker | Navigation bar, rings, a route on a real map |
| AI Assistant | Streaming answers, code blocks, tool calls, composer |
| Product Analytics | Funnel, retention grid, a live event stream |
| Status Page | Uptime bars, incident timeline, gauges |
The dock
Every pattern carries a small tab against the right edge. Open it and you get the three switches that make the point:
- Light and dark, on the same screen, with no reload.
- Language — English, Arabic, Kurdish. Arabic and Kurdish write
dir="rtl"onto<html>, and the entire screen mirrors. Nothing in the pattern does that; every component in the library is built on logical properties (ms-,pe-,start-), so the mirroring is a property of the catalogue. - Personalise, which is
ThemeSettings— hue, chroma, corner radius, density, type scale and motion, applied live to everything on screen.
They are also the regression surface
If a change makes one of these screens worse, that is the change being wrong rather than the screen. They are the only place in the repository where a hundred components are on screen at once, under real data, at real size.