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. Every render below is live and is laid out at the width it says: switch one card, or switch the whole page from the control at the end of the filter bar.

Preview width for every template

Activity timeline

Application

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

Preview width

Preview width for Activity timeline
Desktop
  • 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, src/utility/size.css. Rendered and checked at 320px, 390px, 768px, 1440px.

Show markup Hide markup

Analytics dashboard

Application

A board of four tiles whose 24h, 7d and 30d switch re-renders all of them: a time series, a ranking, a donut and a stacked bar.

Preview width

Preview width for Analytics dashboard
Desktop
  • 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/mark.css, src/chart/tooltip.css, src/chart/crosshair.css, src/chart/data-table.css, src/chart/bar.css, src/chart/donut.css, src/chart/stacked-bar.css, src/layout/container.css, src/utility/spacing.css. Rendered and checked at 320px, 390px, 768px, 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.

Preview width

Preview width for Author card
Desktop
  • 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, src/utility/size.css, src/utility/typography.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.

Preview width

Preview width for Billing page with a plan table
Desktop
  • 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.

Preview width

Preview width for Blog index
Desktop
  • 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, src/utility/typography.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.

Preview width

Preview width for Blog post with a table of contents
Desktop
  • 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.

Preview width

Preview width for Changelog page
Desktop
  • 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.

Preview width

Preview width for Check your email screen
Desktop
  • 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.

Preview width

Preview width for Call to action banner
Desktop
  • 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.

Preview width

Preview width for Empty dashboard shell
Desktop
  • 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

Email client

Application

A folder rail, an inbox list and a reading pane with a message header, collapsed quoted reply, labels, and a compose form.

Preview width

Preview width for Email client
Desktop
  • app
  • email
  • inbox
  • list
  • detail
  • navigation
  • form
  • full-page

Links src/core and src/layout/container.css, src/layout/stack.css, src/layout/cluster.css, src/layout/sidebar.css, src/nav/sidebar-nav.css, src/nav/navlink.css, src/app/collab-queue-item.css, src/app/accordion.css, src/app/collab-composer.css, src/data/avatar.css, src/data/badge.css, src/data/tag.css, src/data/divider.css, src/data/description-list.css, src/forms/field.css, src/forms/label.css, src/forms/input.css, src/forms/textarea.css, src/forms/button.css, src/utility/spacing.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.

Preview width

Preview width for Empty state
Desktop
  • 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.

Preview width

Preview width for Something went wrong page
Desktop
  • 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, 390px, 768px, 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.

Preview width

Preview width for FAQ accordion
Desktop
  • 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.

Preview width

Preview width for Feature grid
Desktop
  • 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.

Preview width

Preview width for Forgot password screen
Desktop
  • 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.

Preview width

Preview width for Hero with a call to action
Desktop
  • 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.

Preview width

Preview width for Inbox queue
Desktop
  • 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

Live chat

Application

A conversation list beside a thread: day separators, an unread marker, delivery states, a typing line, and a composer with an attachment.

Preview width

Preview width for Live chat
Desktop
  • app
  • chat
  • messaging
  • thread
  • list
  • composer
  • full-page

Links src/core and src/layout/container.css, src/layout/stack.css, src/layout/cluster.css, src/layout/sidebar.css, src/app/collab-queue-item.css, src/app/collab-thread.css, src/app/collab-message.css, src/app/collab-composer.css, src/app/collab-presence-dot.css, src/data/avatar.css, src/data/divider.css, src/forms/textarea.css, src/forms/button.css, src/nav/navlink.css, src/utility/spacing.css. Rendered and checked at 320px, 390px, 768px, 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.

Preview width

Preview width for Account locked screen
Desktop
  • 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.

Preview width

Preview width for Log viewer
Desktop
  • 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, 390px, 768px, 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.

Preview width

Preview width for Login screen
Desktop
  • 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.

Preview width

Preview width for Logo cloud
Desktop
  • logo-cloud
  • marketing
  • social-proof
  • cluster

Links src/core and src/layout/container.css, src/layout/cluster.css, src/layout/grid.css, src/layout/stack.css, src/data/icon.css, src/utility/spacing.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.

Preview width

Preview width for Onboarding stepper
Desktop
  • 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.

Preview width

Preview width for Permission denied page
Desktop
  • 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, 390px, 768px, 1440px.

Show markup Hide markup

Pricing card

Marketing

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

Preview width

Preview width for Pricing card
Desktop
  • 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.

Preview width

Preview width for Pricing comparison table
Desktop
  • 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.

Preview width

Preview width for Pricing, five plans
Desktop
  • 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.

Preview width

Preview width for Pricing, four plans
Desktop
  • 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.

Preview width

Preview width for Pricing, one plan
Desktop
  • 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, src/utility/align.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.

Preview width

Preview width for Pricing, six plans
Desktop
  • 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.

Preview width

Preview width for Pricing, three plans with a period switch
Desktop
  • 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.

Preview width

Preview width for Pricing, two plans
Desktop
  • 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.

Preview width

Preview width for Profile page
Desktop
  • 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.

Preview width

Preview width for Record detail with side panel
Desktop
  • 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, 390px, 768px, 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.

Preview width

Preview width for Search results
Desktop
  • 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, src/utility/color.css, src/utility/typography.css. Rendered and checked at 320px, 390px, 768px, 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.

Preview width

Preview width for Settings page with a sidebar
Desktop
  • 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.

Preview width

Preview width for Sign in with providers
Desktop
  • 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/checkbox.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.

Preview width

Preview width for Create account screen
Desktop
  • 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/checkbox.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.

Preview width

Preview width for Stats overview row
Desktop
  • 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.

Preview width

Preview width for Table view with filters
Desktop
  • 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, 390px, 768px, 1440px.

Show markup Hide markup

Task list

Application

A task table with status, assignee, due date and priority, a filter bar, bulk selection, an empty group, and a threaded detail pane.

Preview width

Preview width for Task list
Desktop
  • app
  • tasks
  • table
  • filter
  • detail
  • thread
  • empty-state
  • full-page

Links src/core and src/layout/container.css, src/layout/stack.css, src/layout/cluster.css, src/layout/sidebar.css, src/app/command-filter-bar.css, src/app/command-chip.css, src/app/collab-assignee.css, src/app/collab-thread.css, src/app/collab-message.css, src/app/collab-composer.css, src/data/table.css, src/data/badge.css, src/data/avatar.css, src/data/icon.css, src/data/empty.css, src/data/description-list.css, src/forms/checkbox.css, src/forms/textarea.css, src/forms/button.css, src/nav/navlink.css, src/utility/a11y.css, src/utility/flex.css, src/utility/spacing.css, src/utility/typography.css. Rendered and checked at 320px, 390px, 768px, 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.

Preview width

Preview width for Team members page
Desktop
  • 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.

Preview width

Preview width for Testimonial section
Desktop
  • 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.

Preview width

Preview width for Two-factor code entry
Desktop
  • 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/checkbox.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.