Skip to content

Templates

Ready-to-use page templates to kickstart your project.

Collapsible Table

Several tables on one page, each in a collapsible card with its own columns — for groups that do not share a schema, where one table would stand full of empty cells. One time range drives them all, and rows expand into a history chart. Accounts, integrations, sections, sort, expand, or collapse.

Open in Playground

Filterable Table

Flat row collection built around progressive filtering: a token bar that escalates into full query syntax, saved views that persist a filter set, column and grouping options, and a resizable detail pane. Table, list, rows, records, grid, search, or filtered dataset.

Open in Playground

Grouped Table

Row collection bundled into collapsible sections with per-group counts, so a long list reads as a handful of blocks that expand and collapse. Query filtering and a resizable inspector for the selected row. Table, list, rows, records, grid, or grouped dataset.

Open in Playground

Inbox Table

Two-pane message queue: the table indexes a reading pane rather than being the destination, with a divider you drag to resize. Rows stack when the table narrows, not the window; threads read as collapsible messages; replying opens a composer that leaves the list live. Inbox, mail, email, conversations, thread, triage, reading pane, split pane, resize, collapse, compose, or notifications.

Open in Playground

Searchable Table

Flat table of uniform rows under a block of record-level facts, narrowed three ways at once — a full-text search box, a scope toggle, and per-column popovers — with sortable and filterable columns, per-row hover detail, and totals derived from the visible rows that flag themselves as partial while a filter is on. The shape for one homogeneous list, not nested rows or groups with their own columns. Search, filter, sort, table, data table, flat rows, records, dataset, or totals.

Open in Playground

Checkout Form

Long sectioned form running beside a summary that stays visible while the fields scroll and recalculates as they change, ending on a terminal confirm of the total. Sections run contact, address, delivery choice, then card details. Checkout, payment, billing, cart, buyer, or purchase.

Open in Playground

Contact Form

Flat single-column form mixing control types (text, pill toggles, dropdowns, long free-text) landing on one full-width submit. No steps, no branching, no summary rail. Contact, lead capture, enquiry, survey, or intake form.

Open in Playground

Dialog Wizard

Step through a short flow in a dialog, overlay, or popup launched from the page underneath, which stays where it was. Compact step markers and a pinned action row inside a constrained width, rather than the full page a wizard usually gets. Best for two to four short steps — setup, invite, schedule, onboarding — where losing the context underneath would cost more than the flow is worth.

Open in Playground

Inline Wizard

Accordion wizard stacking every step in one column: the active step expands in place while finished ones collapse to a single line carrying their result and a way back in. Steps that run themselves expand into a nested stepper that ticks check by check and halts the column where one fails. Best when later steps depend on what earlier ones decided.

Open in Playground

Two-column Form

Form split into two columns beneath a hero header: inputs on one flank, a persistent context panel opposite that stays put while the fields scroll. Flat, single submit, no steps. Contact, lead capture, intake, request, or enquiry form.

Open in Playground

Settings Dialog

Preferences inside a modal container with searchable section navigation, so configuration happens without leaving whatever is underneath. Grouped toggles, live preview of appearance choices, rebindable shortcuts. Settings, preferences, configuration, options, or modal dialog.

Open in Playground

Settings Form

Preferences as one continuously scrolling form, sections stacked in order with no navigation between them. The simplest settings shape: everything reachable by scrolling. Settings, preferences, configuration, options, or account.

Open in Playground

Settings Panels

Preferences split into nav-switched panels: a persistent section list swaps the pane beside it, and rows edit in place rather than opening a separate form. Settings, preferences, configuration, options, or account panels.

Open in Playground

Login Card

Credential form inside an elevated centered card, third-party provider buttons separated from the fields by a divider, secondary sign-up and legal links beneath. Login, sign in, signin, authentication, credentials, social, or account access.

Open in Playground

Login Split

Credential form filling one half of a two-pane split, full-bleed media holding the other. Same fields as the card variant, but the layout carries brand imagery. Login, sign in, signin, authentication, credentials, or account access.

Open in Playground

Login SSO

Progressive credential flow that branches on input: the email domain resolves an identity provider and redirects, with a password path as fallback. Two-stage rather than one form. Single sign-on, SSO, SAML, enterprise login, directory, or corporate authentication.

Open in Playground

File Explorer

Hierarchical browser that drills through nested levels as adjacent columns rather than replacing the list each time, with breadcrumb history, switchable list and grid density, and a metadata pane for the selected node. Files, folders, directory, tree, or Finder-style navigator.

Open in Playground

IDE

Dense multi-pane workspace of resizable, collapsible regions: a hierarchy tree on one flank, tabbed documents in the middle, a docked drawer along the bottom, an inspector opposite. Drag a divider to resize or collapse any of them. Editor, IDE, workbench, terminal, or development environment.

Open in Playground

Kanban Board

Horizontal lanes of draggable cards where the column itself is the status, so drag and drop between lanes is the state change. Fixed columns, variable-height cards. Kanban, board, swimlane, sprint, backlog, tasks, or pipeline.

Open in Playground

Page Editor

Three-pane authoring workspace: a source palette on one flank, a live canvas in the middle, and an inspector that retargets to whatever is selected. Drag and drop to reorder, edit to see it render immediately. Builder, composer, drag and drop, page builder, or WYSIWYG editor.

Open in Playground

Card Grid

Searchable, browsable card grid with filter tabs and a real empty state: uniform tiles organized by topic, narrowing in place, with no detail surface behind them. Catalog, index, directory, library, browse, or gallery of entries.

Open in Playground

Documentation Catalog

Reference landing that is pure wayfinding: a banner above a grid of category cards linking into sections, with no article content on the surface itself. Documentation, docs, guide, handbook, reference, or API index.

Open in Playground

Documentation Design

Reference article alternating prose with live rendered examples: an interactive preview, a property table, paired do and don't comparisons, and copyable code blocks. Documentation, docs, guide, reference, usage, or API entry.

Open in Playground

Documentation Technical

Reference article ordered as sequential numbered steps with code at each stage, plus callout cards for prerequisites and onward links. A linear walkthrough rather than a browsable reference. Getting started, install, setup, tutorial, quickstart, or onboarding guide.

Open in Playground

Order Detail

Single-record detail in two columns: a summary header with status and actions, a repeating line-item list, a totals block that sums it, and a chronological activity timeline in the rail. The shape for any record holding children plus a history: a customer order with shipping, an invoice, a transaction, or a job.

Open in Playground

Product Detail

Single-item detail pairing a media gallery with a selection column: variant swatches, a quantity stepper, primary and secondary commit actions, and collapsible specification sections below. Product, listing, item, catalog entry, or storefront detail.

Open in Playground

Work Item Detail

Single work-item detail in two columns: a title with a status selector, a description, a subtask checklist with progress, an attachments block, and a comment and activity feed in the main column, plus a property rail with assignee, dates, labels, and linked items. The shape for any tracked item with children, properties, and a comment history — a task, ticket, issue, story, bug, card, request, or work item.

Open in Playground

AI Chat Conversation

Transcript of alternating turns carrying mixed rich content inline (markdown, code blocks, collapsible tool-call output) beside a resizable artifact panel that holds generated output while the stream keeps scrolling. Chat, conversation, assistant, messages, or copilot thread.

Open in Playground

AI Chat Landing

Zero-state entry surface centered on a single composer with suggestion chips instead of history, sized for the moment before any content exists. The empty counterpart to a transcript. Chat, conversation, assistant, prompt, or messages launcher.

Open in Playground

Centered Hero

Symmetrical centered stack (headline, short blurb, paired call-to-action buttons) resting on one wide full-bleed picture, with nothing on either flank competing. Hero, banner, splash, landing image, or marketing masthead.

Open in Playground

Classic Gallery

Uniform grid of equal-ratio media tiles under a centered intro, with filter tabs that narrow the set in place. Regular rhythm, unlike the variable-height masonry variant. Gallery, photos, images, pictures, or portfolio index.

Open in Playground

Gallery Hero

Centered stack (headline, short blurb, call-to-action buttons) resolving into a multi-image photo grid rather than one wide full-bleed picture, so the imagery reads as a set. Hero, banner, splash, landing image, masthead, or gallery intro.

Open in Playground

Mixed Gallery

Masonry grid of variable-height tiles that pack against each other instead of cropping to a shared ratio, captioned per tile. Irregular rhythm, unlike the uniform gallery. Photos, images, pictures, portfolio, masonry, or media wall.

Open in Playground

Product Gallery

Uniform card grid where every tile carries media, title, supporting line, and a price. Browse-to-select only, with no filtering and no detail surface. Products, catalog, storefront, shop, listings, or ecommerce grid.

Open in Playground

Side Gallery

Asymmetric split section: a copy column of headline, supporting text, and links held against a clustered image collage opposite. Deliberately off-balance, unlike the centered hero. Feature banner, split section, marketing, or gallery intro.

Open in Playground

Shell Nav

Application frame combining both navigation axes: a top menu bar with command-palette search over a resizable hierarchy rail, wrapping placeholder content. For when one axis is not enough. Shell, chrome, layout frame, navigation, sidebar, or menu bar.

Open in Playground

Side Nav

Application frame with a single collapsible, resizable left rail carrying grouped history and search, wrapping the main content. Vertical navigation only, no top bar. Shell, chrome, layout frame, sidebar, drawer, left rail, or navigation.

Open in Playground

Top Nav

Application frame with horizontal navigation only: a centered bar whose items open full-width mega-menu panels, over placeholder content that keeps the entire width. Shell, chrome, layout frame, header, menu, topbar, or navigation.

Open in Playground

Row expansion
	OperatingFirst Meridian Bank · ••4417	Checking	$842,156.00	+13.4%
	PayrollFirst Meridian Bank · ••8830	Checking	$219,408.00	−3.7%
	Tax reserveHarborline Credit Union · ••1265	Savings	$475,000.00	+7.9%
	Treasury sweepNorthgate Financial · ••7702	Money market	$1,328,000.00	−2.3%

Row expansion
	Corporate — EngineeringMeridian Business Card · ••2041	Corporate — Engineering utilization 28%	$41,823.00	$150,000.00	+19.8%
	Corporate — TravelMeridian Business Card · ••6688	Corporate — Travel utilization 80%	$96,405.00	$120,000.00	+31.3%
	Vendor paymentsNorthgate Commercial · ••3319	Vendor payments utilization 5%	$12,050.00	$250,000.00	+5.2%

Row expansion
	Stripeacct_1Qf82LmR	$184,429.00	$6,124.00	+20.0%
	PayPal CommerceMRC-88214-XT	$32,186.50	$1,489.00	−8.7%
	AdyenAD-NORTHWIND-01	$79,051.00	$2,330.50	+81.7%

Row expansion
	Short-duration treasuriesNorthgate Asset Management	$2,451,800.00	$2,400,000.00	+1.0%
	Corporate bond ladderNorthgate Asset Management	$984,200.00	$1,000,000.00	−0.6%
	Money market fundHarborline Capital	$610,500.00	$610,000.00	+1.5%