Skip to content

Templates

Pages you can paste.

Every template here is a composition of components the framework already ships. No template introduces a class of its own, so pasting one and linking the files it names is the whole of the work. Both renders below each title are live: the same document, loaded twice, at desktop width and at phone width.

Activity timeline

Application

A feed of who did what to which record and when, split by day, with a control to fetch older entries.

Desktop
Phone
  • app
  • timeline
  • list
  • data

Links src/core and src/app/flow-activity.css, src/layout/stack.css, src/layout/cluster.css, src/data/divider.css, src/forms/button.css, src/utility/spacing.css. Rendered and checked at 320px, 1440px.

Show markup Hide markup

Analytics dashboard

Application

A period-scoped board of four tiles: a time series, a ranked bar chart, a composition donut and a stacked bar.

Desktop
Phone
  • app
  • dashboard
  • chart
  • data
  • metrics
  • full-page

Links src/core and src/chart/dashboard.css, src/chart/frame.css, src/chart/line.css, src/chart/gridlines.css, src/chart/axis.css, src/chart/data-table.css, src/chart/bar.css, src/chart/donut.css, src/chart/stacked-bar.css. Rendered and checked at 320px, 1440px.

Show markup Hide markup

Author card

Content

The byline block under an article: portrait, one paragraph, what they write about, and two ways to follow.

Desktop
Phone
  • author
  • content
  • card
  • avatar
  • profile

Links src/core and src/layout/sidebar.css, src/layout/cluster.css, src/layout/stack.css, src/data/card.css, src/data/avatar.css, src/data/tag.css, src/forms/button.css, src/nav/navlink.css, src/utility/spacing.css, src/utility/color.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Billing page with a plan table

Application

The billing screen: the plan in force, seat usage against its ceiling, a comparison of every plan, and the last few invoices.

Desktop
Phone
  • app
  • billing
  • table
  • shell
  • pricing
  • full-page

Links src/core and src/app/shell-frame.css, src/app/shell-rail.css, src/app/shell-topbar.css, src/app/shell-sidebar.css, src/app/shell-main.css, src/app/metric-meter.css, src/nav/sidebar-nav.css, src/data/card.css, src/data/table.css, src/data/badge.css, src/layout/stack.css, src/layout/cluster.css, src/forms/button.css, src/utility/spacing.css, src/utility/size.css, src/utility/a11y.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Blog index

Content

A whole listing page: title, a featured post, a grid of cards with date, reading time and topic, and pagination.

Desktop
Phone
  • blog
  • content
  • listing
  • card
  • grid
  • pagination
  • full-page

Links src/core and src/layout/container.css, src/layout/grid.css, src/layout/stack.css, src/data/card.css, src/data/tag.css, src/nav/pagination.css, src/utility/size.css, src/utility/spacing.css, src/utility/color.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Blog post with a table of contents

Content

A whole article page: breadcrumb, byline, a sticky contents rail, prose with a table, a code sample and a pull quote.

Desktop
Phone
  • blog
  • content
  • article
  • prose
  • table-of-contents
  • full-page

Links src/core and src/layout/container.css, src/layout/sidebar.css, src/layout/cluster.css, src/nav/breadcrumb.css, src/nav/sidebar-nav.css, src/prose/prose.css, src/prose/code.css, src/prose/quote.css, src/data/avatar.css, src/data/tag.css, src/data/divider.css, src/utility/spacing.css, src/utility/color.css, src/utility/display.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Changelog page

Content

Releases dated newest first on a timeline, each tagged as added, changed or fixed, with the note that says why.

Desktop
Phone
  • changelog
  • content
  • timeline
  • release-notes
  • full-page

Links src/core and src/layout/container.css, src/layout/stack.css, src/layout/cluster.css, src/app/flow-timeline.css, src/data/badge.css, src/data/divider.css, src/nav/navlink.css, src/utility/spacing.css, src/utility/color.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Check your email screen

Auth

The wait state after a link is sent: what was sent, where, when it expires, how to send it again and how to correct the address.

Desktop
Phone
  • auth
  • sign-in
  • status
  • full-page

Links src/core and src/app/auth-screen.css, src/app/auth-state.css, src/forms/button.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Call to action banner

Marketing

A closing panel: one heading, one sentence, the action, and the two facts that answer the hesitation.

Desktop
Phone
  • cta
  • marketing
  • banner
  • card

Links src/core and src/layout/container.css, src/layout/cluster.css, src/layout/stack.css, src/data/card.css, src/data/icon.css, src/forms/button.css, src/utility/spacing.css, src/utility/typography.css, src/utility/color.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Empty dashboard shell

Application

The whole application frame with nothing in it yet: rail, topbar, drawer navigation and a work area holding one first-run empty state.

Desktop
Phone
  • app
  • dashboard
  • shell
  • empty-state
  • navigation
  • full-page

Links src/core and src/app/shell-frame.css, src/app/shell-rail.css, src/app/shell-topbar.css, src/app/shell-sidebar.css, src/app/shell-main.css, src/nav/sidebar-nav.css, src/data/empty.css, src/forms/button.css, src/utility/a11y.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Empty state

Application

A framed empty panel that says what is missing, why the panel is blank, and gives two ways out of it.

Desktop
Phone
  • app
  • empty
  • data

Links src/core and src/data/empty.css, src/forms/button.css, src/data/kbd.css. Rendered and checked at 320px, 1440px.

Show markup Hide markup

Something went wrong page

Application

A whole failure page: what broke, a reference the support desk can look up, and three routes back out of it.

Desktop
Phone
  • app
  • error
  • empty
  • full-page

Links src/core and src/layout/center.css, src/layout/stack.css, src/data/empty.css, src/forms/button.css, src/prose/code.css, src/nav/navlink.css, src/utility/spacing.css, src/utility/typography.css. Rendered and checked at 320px, 1440px.

Show markup Hide markup

FAQ accordion

Marketing

Six questions as native disclosures, one open at a time, with the route to a human underneath.

Desktop
Phone
  • faq
  • marketing
  • accordion
  • disclosure

Links src/core and src/app/accordion.css, src/layout/container.css, src/layout/stack.css, src/nav/navlink.css, src/utility/spacing.css, src/utility/color.css, src/utility/typography.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Feature grid

Marketing

A section heading over six cards, each an icon, a short title and the sentence that says what the feature does.

Desktop
Phone
  • features
  • marketing
  • grid
  • card

Links src/core and src/layout/container.css, src/layout/grid.css, src/layout/stack.css, src/data/card.css, src/data/icon.css, src/utility/size.css, src/utility/spacing.css, src/utility/typography.css, src/utility/color.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Forgot password screen

Auth

The screen that asks for one address and sends a reset link, with the expiry stated and a route back to sign in.

Desktop
Phone
  • auth
  • password-reset
  • form
  • full-page

Links src/core and src/app/auth-screen.css, src/app/auth-form.css, src/forms/input.css, src/forms/button.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Hero with a call to action

Marketing

A landing section head: eyebrow, headline, one paragraph, the action that matters and a quieter second one.

Desktop
Phone
  • hero
  • marketing
  • cta
  • landing

Links src/core and src/layout/container.css, src/layout/stack.css, src/layout/cluster.css, src/forms/button.css, src/data/badge.css, src/data/icon.css, src/utility/spacing.css, src/utility/typography.css, src/utility/color.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Inbox queue

Application

A work queue beside its folders: status, subject, snippet, who has it, when it moved, and the actions on each row.

Desktop
Phone
  • app
  • inbox
  • list
  • data
  • full-page

Links src/core and src/nav/navlink.css, src/layout/container.css, src/layout/sidebar.css, src/layout/stack.css, src/layout/cluster.css, src/nav/sidebar-nav.css, src/app/collab-queue-item.css, src/app/collab-assignee.css, src/data/avatar.css, src/forms/button.css, src/utility/spacing.css. Rendered and checked at 320px, 1440px.

Show markup Hide markup

Account locked screen

Auth

The refusal state: why sign-in stopped, when it opens again, the two ways out, and where to go if neither works.

Desktop
Phone
  • auth
  • status
  • locked
  • full-page

Links src/core and src/app/auth-screen.css, src/app/auth-state.css, src/forms/button.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Log viewer

Application

A bounded log tail with level filters, a text search, a follow switch and a live count of what survived the filter.

Desktop
Phone
  • app
  • logs
  • filter
  • data
  • full-page

Links src/core and src/layout/container.css, src/layout/stack.css, src/layout/cluster.css, src/app/metric-log-view.css, src/app/command-filter-bar.css, src/app/command-chip.css, src/app/command-search.css, src/forms/switch.css, src/forms/button.css, src/utility/a11y.css, src/utility/spacing.css. Rendered and checked at 320px, 1440px.

Show markup Hide markup

Login screen

Auth

A whole sign-in page: brand, email and password, one recovery route, one way to sign up.

Desktop
Phone
  • auth
  • login
  • form
  • full-page

Links src/core and src/layout/center.css, src/data/card.css, src/data/divider.css, src/forms/field.css, src/forms/label.css, src/forms/input.css, src/forms/help.css, src/forms/checkbox.css, src/forms/button.css, src/layout/stack.css, src/layout/cluster.css, src/nav/navlink.css, src/utility/spacing.css, src/utility/typography.css, src/utility/color.css. Rendered and checked at 320px, 390px, 768px, 1280px.

Show markup Hide markup

Logo cloud

Marketing

A quiet row of customer marks under one line of context, wrapping to as many rows as the width allows.

Desktop
Phone
  • logo-cloud
  • marketing
  • social-proof
  • cluster

Links src/core and src/layout/container.css, src/layout/cluster.css, src/layout/stack.css, src/data/icon.css, src/utility/spacing.css, src/utility/typography.css, src/utility/color.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Onboarding stepper

Application

A first-run setup flow: the steps done and still to come, the form for the step in progress, and the two ways out of it.

Desktop
Phone
  • app
  • onboarding
  • stepper
  • form
  • full-page

Links src/core and src/app/flow-stepper.css, src/data/card.css, src/forms/field.css, src/forms/label.css, src/forms/input.css, src/forms/help.css, src/forms/select.css, src/forms/radio.css, src/forms/button.css, src/layout/center.css, src/layout/stack.css, src/layout/cluster.css, src/utility/spacing.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Permission denied page

Application

A whole 403 page: what was refused, which account was refused it, who can grant it, and a way to ask.

Desktop
Phone
  • app
  • error
  • auth
  • empty
  • full-page

Links src/core and src/layout/center.css, src/layout/stack.css, src/layout/cluster.css, src/data/empty.css, src/data/card.css, src/data/description-list.css, src/data/avatar.css, src/forms/button.css, src/nav/navlink.css, src/utility/spacing.css, src/utility/typography.css. Rendered and checked at 320px, 1440px.

Show markup Hide markup

Pricing card

Marketing

One plan with its price, what is included, and the action that buys it.

Desktop
Phone
  • pricing
  • marketing
  • card
  • cta

Links src/core and src/data/card.css, src/data/badge.css, src/data/icon.css, src/data/list.css, src/forms/button.css, src/layout/stack.css, src/layout/cluster.css, src/utility/spacing.css, src/utility/typography.css, src/utility/color.css. Rendered and checked at 320px, 390px, 768px, 1280px.

Show markup Hide markup

Pricing comparison table

Marketing

Three tiers as columns and their features as rows, with a price, a marked plan and a buy action in every column.

Desktop
Phone
  • pricing
  • marketing
  • table
  • comparison
  • cta
  • three-plans

Links src/core and src/layout/container.css, src/layout/stack.css, src/data/table.css, src/data/badge.css, src/data/icon.css, src/forms/button.css, src/utility/spacing.css, src/utility/typography.css, src/utility/color.css, src/utility/display.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Pricing, five plans

Marketing

The awkward count, broken three then two on purpose, with the last two given the wider tracks the contract plans need.

Desktop
Phone
  • pricing
  • marketing
  • card
  • cta
  • five-plans

Links src/core and src/layout/container.css, src/layout/grid.css, src/layout/stack.css, src/layout/cluster.css, src/data/card.css, src/data/badge.css, src/data/icon.css, src/data/list.css, src/forms/button.css, src/utility/flex.css, src/utility/spacing.css, src/utility/color.css, src/utility/typography.css, src/utility/border.css, src/utility/display.css, src/utility/grid.css, src/utility/layout-responsive.css, src/utility/a11y.css. Rendered and checked at 320px, 430px, 768px, 1024px, 1440px.

Show markup Hide markup

Pricing, four plans

Marketing

One column on a phone, two by two from 480px, four across from 1024px, with every row of the cards sharing a track.

Desktop
Phone
  • pricing
  • marketing
  • card
  • cta
  • four-plans

Links src/core and src/layout/container.css, src/layout/grid.css, src/layout/stack.css, src/layout/cluster.css, src/data/card.css, src/data/badge.css, src/data/icon.css, src/data/list.css, src/forms/button.css, src/utility/flex.css, src/utility/spacing.css, src/utility/color.css, src/utility/typography.css, src/utility/border.css, src/utility/display.css, src/utility/grid.css, src/utility/layout-responsive.css, src/utility/a11y.css. Rendered and checked at 320px, 430px, 768px, 1024px, 1440px.

Show markup Hide markup

Pricing, one plan

Marketing

A single plan set beside the argument for it, so one card is not stranded in the middle of a wide screen.

Desktop
Phone
  • pricing
  • marketing
  • card
  • cta
  • one-plan

Links src/core and src/layout/container.css, src/layout/split.css, src/layout/stack.css, src/layout/cluster.css, src/data/card.css, src/data/badge.css, src/data/icon.css, src/data/list.css, src/forms/button.css, src/utility/flex.css, src/utility/spacing.css, src/utility/color.css, src/utility/a11y.css. Rendered and checked at 320px, 430px, 768px, 1024px, 1440px.

Show markup Hide markup

Pricing, six plans

Marketing

Six plans as three by two rather than six across, because a sixth of a screen is not a readable column at any width.

Desktop
Phone
  • pricing
  • marketing
  • card
  • cta
  • six-plans

Links src/core and src/layout/container.css, src/layout/grid.css, src/layout/stack.css, src/layout/cluster.css, src/data/card.css, src/data/badge.css, src/data/icon.css, src/data/list.css, src/forms/button.css, src/utility/flex.css, src/utility/spacing.css, src/utility/color.css, src/utility/typography.css, src/utility/border.css, src/utility/display.css, src/utility/grid.css, src/utility/layout-responsive.css, src/utility/a11y.css. Rendered and checked at 320px, 430px, 768px, 1024px, 1440px.

Show markup Hide markup

Pricing, three plans with a period switch

Marketing

The classic three-up with the middle plan featured, plus a monthly and yearly switch that states what yearly saves.

Desktop
Phone
  • pricing
  • marketing
  • card
  • cta
  • toggle
  • three-plans

Links src/core and src/layout/container.css, src/layout/grid.css, src/layout/stack.css, src/layout/cluster.css, src/data/card.css, src/data/badge.css, src/data/icon.css, src/data/list.css, src/forms/button.css, src/app/control-segmented.css, src/utility/flex.css, src/utility/size.css, src/utility/spacing.css, src/utility/color.css, src/utility/typography.css, src/utility/border.css, src/utility/display.css, src/utility/grid.css, src/utility/layout-responsive.css, src/utility/a11y.css. Rendered and checked at 320px, 430px, 768px, 1024px, 1440px.

Show markup Hide markup

Pricing, two plans

Marketing

Free against paid, side by side above 768px, with the recommended plan named in words rather than drawn with a border.

Desktop
Phone
  • pricing
  • marketing
  • card
  • cta
  • two-plans

Links src/core and src/layout/container.css, src/layout/grid.css, src/layout/stack.css, src/layout/cluster.css, src/data/card.css, src/data/badge.css, src/data/icon.css, src/data/list.css, src/forms/button.css, src/utility/flex.css, src/utility/spacing.css, src/utility/color.css, src/utility/typography.css, src/utility/border.css, src/utility/display.css, src/utility/grid.css, src/utility/layout-responsive.css, src/utility/a11y.css. Rendered and checked at 320px, 430px, 768px, 1024px, 1440px.

Show markup Hide markup

Profile page

Content

A person page: avatar, name and role, the facts about them as a description list, what they work on, and their recent activity.

Desktop
Phone
  • content
  • profile
  • avatar
  • timeline
  • full-page

Links src/core and src/app/flow-timeline.css, src/data/avatar.css, src/data/badge.css, src/data/tag.css, src/data/description-list.css, src/data/card.css, src/layout/container.css, src/layout/stack.css, src/layout/cluster.css, src/forms/button.css, src/utility/spacing.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Record detail with side panel

Application

One record opened: breadcrumb, status, a timeline of what happened, and a side panel of properties and actions.

Desktop
Phone
  • app
  • detail
  • data
  • timeline
  • full-page

Links src/core and src/layout/container.css, src/layout/sidebar.css, src/layout/stack.css, src/layout/cluster.css, src/nav/breadcrumb.css, src/data/card.css, src/data/badge.css, src/data/description-list.css, src/data/divider.css, src/data/avatar.css, src/app/flow-timeline.css, src/forms/button.css, src/utility/spacing.css. Rendered and checked at 320px, 1440px.

Show markup Hide markup

Search results

Application

A results page: a scoped query, type facets, a spoken result count, ranked results with snippets, and pagination.

Desktop
Phone
  • app
  • search
  • list
  • data
  • pagination
  • full-page

Links src/core and src/layout/container.css, src/layout/stack.css, src/layout/cluster.css, src/app/command-search.css, src/app/command-filter-bar.css, src/app/command-chip.css, src/data/list.css, src/nav/navlink.css, src/nav/pagination.css, src/utility/a11y.css, src/utility/spacing.css. Rendered and checked at 320px, 1440px.

Show markup Hide markup

Settings page with a sidebar

Application

An application settings page: section navigation in the pane, a profile form, notification switches and one save bar per card.

Desktop
Phone
  • app
  • settings
  • shell
  • form
  • navigation
  • full-page

Links src/core and src/app/shell-frame.css, src/app/shell-rail.css, src/app/shell-topbar.css, src/app/shell-sidebar.css, src/app/shell-main.css, src/nav/sidebar-nav.css, src/data/card.css, src/forms/field.css, src/forms/label.css, src/forms/input.css, src/forms/help.css, src/forms/select.css, src/forms/switch.css, src/forms/button.css, src/layout/stack.css, src/layout/cluster.css, src/utility/spacing.css, src/utility/size.css, src/utility/a11y.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Sign in with providers

Auth

A sign-in screen with third-party buttons, email and password with a reveal, a recovery route and a way to sign up.

Desktop
Phone
  • auth
  • sign-in
  • form
  • full-page
  • app

Links src/core and src/app/auth-screen.css, src/app/auth-provider.css, src/app/auth-form.css, src/app/auth-password.css, src/forms/input.css, src/forms/button.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Create account screen

Auth

A sign-up screen: name, work email, a new password with its rule stated up front, the terms consent, and a route back to sign in.

Desktop
Phone
  • auth
  • sign-up
  • form
  • full-page
  • app

Links src/core and src/app/auth-screen.css, src/app/auth-provider.css, src/app/auth-form.css, src/app/auth-password.css, src/forms/input.css, src/forms/button.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Stats overview row

Application

The band a dashboard opens on: four key figures with movement, a trend plot, a target and a freshness note.

Desktop
Phone
  • app
  • metrics
  • dashboard
  • data

Links src/core and src/app/metric-stat-grid.css, src/app/metric-kpi.css, src/app/metric-delta.css, src/app/metric-sparkline.css, src/layout/stack.css, src/utility/spacing.css. Rendered and checked at 320px, 1440px.

Show markup Hide markup

Table view with filters

Application

A records page: scoped search, sort, filter chips with a live count, a scrolling table and pagination.

Desktop
Phone
  • app
  • table
  • data
  • filter
  • pagination
  • full-page

Links src/core and src/layout/container.css, src/layout/stack.css, src/layout/cluster.css, src/app/command-search.css, src/app/command-sort.css, src/app/command-filter-bar.css, src/app/command-chip.css, src/data/table.css, src/data/badge.css, src/nav/pagination.css, src/forms/button.css, src/utility/a11y.css, src/utility/spacing.css. Rendered and checked at 320px, 1440px.

Show markup Hide markup

Team members page

Application

A workspace roster in the application frame: a filter toolbar, an invite action and a table of people with role, status and last activity.

Desktop
Phone
  • app
  • team
  • table
  • shell
  • roster
  • full-page

Links src/core and src/app/shell-frame.css, src/app/shell-rail.css, src/app/shell-topbar.css, src/app/shell-sidebar.css, src/app/shell-main.css, src/nav/sidebar-nav.css, src/data/table.css, src/data/avatar.css, src/data/badge.css, src/layout/cluster.css, src/layout/stack.css, src/forms/input.css, src/forms/button.css, src/utility/spacing.css, src/utility/size.css, src/utility/a11y.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Testimonial section

Marketing

Three attributed quotations in a grid, each with the speaker, their role and the company they said it at.

Desktop
Phone
  • testimonial
  • marketing
  • quote
  • grid
  • social-proof

Links src/core and src/layout/container.css, src/layout/grid.css, src/layout/stack.css, src/layout/cluster.css, src/data/card.css, src/data/avatar.css, src/prose/quote.css, src/utility/size.css, src/utility/spacing.css, src/utility/typography.css, src/utility/color.css, src/utility/display.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Two-factor code entry

Auth

A verification screen: six boxes that are one field, where the code came from, how to resend it, and the recovery route.

Desktop
Phone
  • auth
  • two-factor
  • one-time-code
  • form
  • full-page

Links src/core and src/app/auth-screen.css, src/app/auth-form.css, src/app/auth-otp.css, src/forms/button.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Reading these from an agent

The same library is served over MCP, so an agent asking for a login page receives the markup rather than a description of it. Point a client at the package and call list_templates, then get_template. 

npx -y @barebase/style mcp

The machine-readable form of this page is templates.json. It is generated from the same files these cards are, so the two cannot disagree.