Ready-to-use page templates to kickstart your project.1 of upstream's 33 gallery templates are still being transcribed to
Svelte.
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.
Searchable Table
Flat row collection with query search and an action toolbar above sortable rows, running full width with no detail pane. Sits between the bare table and the filtered one. Table, list, rows, records, grid, search, or admin index.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Product Gallery
Uniform card grid where every tile carries media, title, supporting line, and a price. Browse-to-select only — no filtering, no detail surface. Products, catalog, storefront, shop, listings, or ecommerce grid.
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.
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.
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.
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.