Pattern library

Complete screens.
Grouped to explore.

Browse the screen library without loading every preview. Each group leads with two deliberately different examples; open the group to see the rest.

Available
60
Groups
13
Sizes
03

Pattern groups

Browse by group

Each group opens its live previews, with a size control on every screen.

0110 available

Authentication

10 patternsOpen
026 available

Application shells

6 patternsOpen
034 available

Dashboards

4 patternsOpen
047 available

Data tables & list views

7 patternsOpen
053 available

Detail & record screens

3 patternsOpen
064 available

Forms

4 patternsOpen
076 available

Settings

6 patternsOpen
082 available

Charts & analytics

2 patternsOpen
093 available

System & edge states

3 patternsOpen
102 available

Onboarding

2 patternsOpen
116 available

AI & agentic surfaces

6 patternsOpen
125 available

Editorial & CMS

5 patternsOpen
132 available

Marketing & entry surfaces

2 patternsOpen

13 groups with live routes

Two contrasting routes from each available group — different arrangements, not the same layout twice. Every preview has its own screen-size control.

Authentication · 2 patterns

Sign-in, registration, verification, recovery, and invitation flows for secure workspace access.

View all patterns
01

Split-screen authentication with account context, password entry, and SSO.

02

Email entry, the one-time code handoff, and the expired-link recovery state in one flow.

Application shells · 2 patterns

Application frames — sidebar, header-only, multi-tenant, mobile-first, scheduling, and documentation. The chrome is real and working; the body each one stands over stays anonymous, so what you compare between two frames is always the frame.

View all patterns
01

One shell with flat or nested navigation and a flush or floating treatment — the recipe switches both without the body moving.

02

A command center whose assistant pane is a sibling of the work surface rather than a sheet over it: resizable, collapsible, and open at phone width.

Dashboards · 2 patterns

Compact, data-forward overview screens for analytics, operations, monitoring, and first-run states.

View all patterns
01

Loads into its own skeleton, then KPI, trend, and activity with search and notification states.

02

Tenant-scoped period comparison, switchable between a dashed baseline and paired bars.

Data tables & list views · 2 patterns

Searchable, filterable, selectable, virtualized, and alternative views for dense record collections.

View all patterns
01

Search, sort, filter and paginate 28 records — with a create dialog and an empty-collection state.

02

Roster, roles, invitations and bulk review; the action bar is always on screen, armed by the first check.

Detail & record screens · 2 patterns

One job shown four ways — a route in a sidebar console, a route under a header-only shell, a dialog over its list, and a drawer over its board — each in a different product so the shells never blur together.

View all patterns
01

A field-service work order on its own route inside a labelled sidebar console.

02

A podcast episode under a top navigation header, so content and metadata share the full width.

Forms · 2 patterns

Sectioned, multi-step, modal, validation-heavy, query-building, and upload workflows.

View all patterns
01

Long-form editing with a dirty save bar, an async availability check, and every validation state.

02

Progressive data entry followed by a review and confirmation step.

Settings · 2 patterns

Account, team, notification, billing, API access, and appearance configuration screens.

View all patterns
01

One canonical General page; every other section links to the screen that implements it.

02

Identity fields, avatar controls, and a clearly separated danger zone.

Charts & analytics · 2 patterns

Chart-forward analysis screens that pair token-driven visualizations with controls and supporting data.

View all patterns
01

A composed value, baseline, and volume chart whose click-scoped window drives every panel below.

02

A donut, ranked bars, record-type mix, size-against-growth, and trend lines on one selection.

System & edge states · 2 patterns

Empty, not-found, failure, loading, and permission states that make applications resilient.

View all patterns
01

An in-shell missing-page state naming the requested path, with suggested destinations.

02

Retry guidance, a request identifier, and a support path.

Onboarding · 2 patterns

Guided workspace setup and a task-first dashboard for adding records, preparing invitations, and importing data.

View all patterns
01

A resumable setup flow for workspace details, teammate invitations, and a first record.

02

Task-first workspace setup with record creation, prepared invitations, and a preview-before-import CSV flow.

AI & agentic surfaces · 2 patterns

Conversational workspaces, run traces, approval gates, tools, knowledge, evaluations, and usage observability.

View all patterns
01

Streaming answers with reasoning, stop and resume, replay, and a source list per turn.

02

A chat thread that runs workspace tools and ships artifacts with preview and code tabs.

Editorial & CMS · 2 patterns

Content overview, editing, media, modeling, and publishing workflows for editorial teams.

View all patterns
01

Editorial counts, an activity feed, and the publishing schedule for the week.

02

An editing column with formatting, search metadata, and revisions beside publishing controls.

Marketing & entry surfaces · 2 patterns

Account-aware upgrade and product-update surfaces composed inside the application shell, with a reusable focused upgrade dialog.

View all patterns
01

Plan cards and a full capability matrix as two views of one choice, readable one plan at a time on a phone.

02

Filterable release entries with unread state inside the workspace shell.