# brand-ui templates

> Whole screens, copy-own: 54 templates built from @elabs-ai/components-* and the registry's blocks. A registry template is one command away; a starter scaffolds a new app. Each has a page at https://elabs-ai.com/templates/<slug>; the packages are described at https://elabs-ai.com/llms.txt.

## About — https://elabs-ai.com/templates/about

- Scenario: The about page: mission, story, milestones, values and numbers, the team grid, a careers teaser with open roles and the closing CTA.
- Blocks: about-story-01 (https://elabs-ai.com/blocks/content-about-story), careers-01 (https://elabs-ai.com/blocks/content-careers), marketing-cta-01 (https://elabs-ai.com/blocks/marketing-call-to-action), marketing-team-01 (https://elabs-ai.com/blocks/marketing-team), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/about-page.json` (registry item `about-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-about--docs

## Account — https://elabs-ai.com/templates/account

- Scenario: The account page: the public profile with its stats and contribution strip, and the order history with track, reorder and invoice actions — a signed-in route inside the site frame.
- Blocks: order-history-01 (https://elabs-ai.com/blocks/commerce-order-history), site-frame, user-profile-01 (https://elabs-ai.com/blocks/account-and-settings-user-profile)
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/account-page.json` (registry item `account-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-account--docs

## Agent Operations Center — https://elabs-ai.com/templates/agent-operations-center

- Domain: AI agents
- Scenario: The control room for a fleet of AI agents in production. Spend against limits, the escalation boundary and the insight feed on one tab; the trace waterfall and the hand-off inspector on the next; a run review with its decision record; and the audit log.
- Views:
  - Overview: The insight feed, spend against limit and the escalation boundary.
  - Runs: The trace waterfall and the hand-off inspector.
  - Review queue: Runs waiting for a human decision, with the decision record.
  - Audit log: Every action, by whom, with what evidence.
  - Agents: The fleet and each agent's state.
  - Budgets: Spend limits per agent and team.
  - Guardrails: What the agents may not do.
  - Evaluations: How each agent scores over time.
- Interaction: Approve or reject a run in the review queue: the decision is recorded, the count in the navigation and the header changes.
- Blocks: agent-run-review-01 (https://elabs-ai.com/blocks/ai-and-terminal-agent-run-review), agent-trace-waterfall-01 (https://elabs-ai.com/blocks/agent-ops-trace-waterfall), audit-log-01 (https://elabs-ai.com/blocks/agent-ops-audit-log), decision-record-01 (https://elabs-ai.com/blocks/agent-ops-decision-record), escalation-boundary-01 (https://elabs-ai.com/blocks/agent-ops-escalation-boundary), handoff-inspector-01 (https://elabs-ai.com/blocks/agent-ops-handoff-inspector), insight-feed-01 (https://elabs-ai.com/blocks/agent-ops-insight-feed), spend-against-limit-01 (https://elabs-ai.com/blocks/agent-ops-spend-against-limit), workspace-shell
- Packages: @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/agent-ops-center-page.json` (registry item `agent-ops-center-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-ai-products-agent-operations-center--docs

## Agent Studio — https://elabs-ai.com/templates/agent-studio

- Domain: AI agents
- Scenario: Where a business designs, equips and watches its agents. Every design is listed with how it ran this week; the designer is a canvas; skills and MCP servers show which designs use them; a run opens in the dock with its steps, and a failed one opens its full trace.
- Views:
  - Designs: Every agent design and how it ran this week.
  - Designer: The agent's graph on a canvas, with an inspector.
  - Skills: The skill library and which designs use each.
  - MCP servers: Connected servers and their tools.
  - Runs: Runs by state; a paused one names who it waits for.
- Interaction: Open a run in the dock; a failed run opens its trace as a waterfall.
- Blocks: agent-designer-01 (https://elabs-ai.com/blocks/agent-ops-agent-designer), agent-trace-waterfall-01 (https://elabs-ai.com/blocks/agent-ops-trace-waterfall), workspace-shell
- Packages: @elabs-ai/components-charts, @elabs-ai/components-data, @elabs-ai/components-icons, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/agent-studio-page.json` (registry item `agent-studio-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-ai-products-agent-studio--docs

## Agentic AI Workspace — https://elabs-ai.com/templates/agentic-ai-workspace

- Scenario: A full-page agent workspace composed from the @elabs-ai/components-* grammar: a double-sided application shell (collapsible left nav + the real ContextPanel right rail with animated collapse and asset drill-in) wrapping a complete agentic AI interaction — reasoning, a plan, the AgentTimeline execution rail, tools with JSON behind disclosure, a ToolResultCard chart headline, an ApprovalCard decision, a task summary, a checkpoint, and a grounded AgentMessage answer with an EvidenceChip and a SourceList.
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-scenarios-agentic-ai-workspace--docs

## AI Assistant — https://elabs-ai.com/templates/ai-assistant

- Scenario: AI assistant template — the canonical full-screen AI assistant composition: app-shell nav, an immersive `ChatShell` (transcript scrolls behind a floating `Composer`, one centred reading column) and the `ContextPanel` right rail.
- Scaffold: `npx -y @elabs-ai/components-cli create my-ai-assistant --template ai-assistant`
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-starters-ai-assistant--docs

## Back Office — https://elabs-ai.com/templates/back-office

- Scenario: Orders, stock and prices for a web shop behind one set of tabs in the workspace shell: the orders master / detail grid, a replenishment grid grouped by warehouse with an order-now flag and typed, pasted or filled-down order quantities, and the price list editor.
- Blocks: grid-orders-detail-01 (https://elabs-ai.com/blocks/data-grids-orders-detail), grid-parts, grid-price-editor-01 (https://elabs-ai.com/blocks/data-grids-price-editor), workspace-shell
- Packages: @elabs-ai/components-data, @elabs-ai/components-icons, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/commerce-backoffice-page.json` (registry item `commerce-backoffice-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-commerce-back-office--docs

## Blog — https://elabs-ai.com/templates/blog

- Scenario: The blog index: a filterable, paged list of posts with a featured post on top, and the newsletter signup below.
- Blocks: blog-list-01 (https://elabs-ai.com/blocks/content-blog-list), marketing-newsletter-01 (https://elabs-ai.com/blocks/marketing-newsletter), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/blog-page.json` (registry item `blog-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-blog--docs

## Blog Article — https://elabs-ai.com/templates/blog-article

- Scenario: A single blog article: the post with its table of contents, author, share controls, related posts and an inline subscribe — the reading page of the blog.
- Blocks: blog-post-01 (https://elabs-ai.com/blocks/content-blog-post), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/blog-article-page.json` (registry item `blog-article-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-blog-article--docs

## Careers — https://elabs-ai.com/templates/careers

- Scenario: The careers page: the values that make the pitch, the open roles grouped by team with a leave-your-details fallback, the team grid, and testimonials from the people who work there.
- Blocks: careers-01 (https://elabs-ai.com/blocks/content-careers), marketing-team-01 (https://elabs-ai.com/blocks/marketing-team), marketing-testimonials-01 (https://elabs-ai.com/blocks/marketing-testimonials), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/careers-page.json` (registry item `careers-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-careers--docs

## Case Studies — https://elabs-ai.com/templates/case-studies

- Scenario: The customers page: the wall of case studies filterable by industry, the big-number outcomes, a logo strip and the closing CTA.
- Blocks: case-studies-01 (https://elabs-ai.com/blocks/content-case-studies), marketing-cta-01 (https://elabs-ai.com/blocks/marketing-call-to-action), marketing-logos-01 (https://elabs-ai.com/blocks/marketing-logos), marketing-stats-02 (https://elabs-ai.com/blocks/marketing-stats-big-numbers), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/case-studies-page.json` (registry item `case-studies-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-case-studies--docs

## Changelog — https://elabs-ai.com/templates/changelog

- Scenario: The changelog: releases in reverse order, each with its typed changes, an RSS link and a subscribe form, followed by a CTA banner for readers who are not customers yet.
- Blocks: changelog-01 (https://elabs-ai.com/blocks/content-changelog), marketing-cta-02 (https://elabs-ai.com/blocks/marketing-cta-banner), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/changelog-page.json` (registry item `changelog-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-changelog--docs

## Checkout — https://elabs-ai.com/templates/checkout

- Scenario: The checkout page: contact, delivery, payment and the order summary in the site frame with the trust band below it — the last page before the order.
- Blocks: checkout-01 (https://elabs-ai.com/blocks/commerce-checkout), marketing-trust-01 (https://elabs-ai.com/blocks/marketing-trust), site-frame
- Packages: @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/checkout-page.json` (registry item `checkout-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-checkout--docs

## Coming Soon — https://elabs-ai.com/templates/coming-soon

- Scenario: The pre-launch page: an email-first hero with benefits and social proof, the waitlist with its milestones, and a preview of the features to come.
- Blocks: marketing-features-01 (https://elabs-ai.com/blocks/marketing-features), marketing-hero-03 (https://elabs-ai.com/blocks/marketing-hero-signup), marketing-waitlist-01 (https://elabs-ai.com/blocks/marketing-waitlist), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/coming-soon-page.json` (registry item `coming-soon-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-coming-soon--docs

## Compare — https://elabs-ai.com/templates/compare

- Scenario: The comparison page: a side-by-side table against the alternatives with a best-for row, testimonials from people who switched, the FAQ and the closing CTA.
- Blocks: marketing-compare-01 (https://elabs-ai.com/blocks/marketing-compare), marketing-cta-01 (https://elabs-ai.com/blocks/marketing-call-to-action), marketing-faq-01 (https://elabs-ai.com/blocks/marketing-faq), marketing-testimonials-01 (https://elabs-ai.com/blocks/marketing-testimonials), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/compare-page.json` (registry item `compare-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-compare--docs

## Contact — https://elabs-ai.com/templates/contact

- Scenario: The contact page: the contact form with a topic picker and the other ways to reach the company, the FAQ that answers the question before it is asked, and the newsletter for people who are not ready yet.
- Blocks: marketing-contact-01 (https://elabs-ai.com/blocks/marketing-contact), marketing-faq-01 (https://elabs-ai.com/blocks/marketing-faq), marketing-newsletter-01 (https://elabs-ai.com/blocks/marketing-newsletter), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/contact-page.json` (registry item `contact-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-contact--docs

## Customer 360 — https://elabs-ai.com/templates/customer-360

- Domain: Customers & support
- Scenario: An account manager opens one account five minutes before the call. Health, usage against the contract, next actions and the people are on one screen, and the brief in the dock says what changed since last time.
- Views:
  - Home: The book of accounts and what needs attention.
  - Accounts: One account: metrics, usage, health, actions, people.
  - People: Every contact and the relationship gap.
  - Renewals: What renews when, and its risk.
  - Deals: Open expansion and renewal deals.
  - Tickets: Open support tickets on the account.
  - Documents: Contracts and order forms.
- Interaction: Complete a next action in place and open the account brief in the dock; the health score explains itself when opened.
- Blocks: score-explanation-01 (https://elabs-ai.com/blocks/agent-ops-score-explanation), workspace-shell
- Packages: @elabs-ai/components-charts, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/customer-360-page.json` (registry item `customer-360-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-customers-customer-360--docs

## Customer Story — https://elabs-ai.com/templates/customer-story

- Scenario: A single customer story: the headline outcome, the customer's facts, the challenge/solution/results narrative with pull quotes, before-and-after numbers and the CTA to talk to sales.
- Blocks: customer-story-01 (https://elabs-ai.com/blocks/media-customer-story), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/customer-story-page.json` (registry item `customer-story-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-customer-story--docs

## Dashboard — https://elabs-ai.com/templates/dashboard

- Scenario: Dashboard template — the canonical full-screen dashboard composition (app-shell + MetricGrid + MetricCard).
- Scaffold: `npx -y @elabs-ai/components-cli create my-dashboard --template dashboard`
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-starters-dashboard--docs

## Data App — https://elabs-ai.com/templates/data-app

- Scenario: Data app template — the canonical full-screen data-app composition (app-shell + DataTable with toolbar).
- Scaffold: `npx -y @elabs-ai/components-cli create my-data-app --template data-app`
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-starters-data-app--docs

## Developer Platform — https://elabs-ai.com/templates/developer-platform

- Domain: Engineering & reliability
- Scenario: A platform team's delivery control room. The headline says how many of today's runs failed and whether main is green; the four DORA numbers sit above the pipeline graph, the run's own log and the table of runs; picking a failed run opens the stage it stopped at, the failing check and the change under test as a diff, with the re-run one click away and written to the audit trail.
- Views:
  - Pipelines: The stages of the selected run as a graph, and its log as it printed.
  - Runs: Every run of the day under its filters, most urgent first.
  - Deployments: Deploys per day, lead time, change failure rate and time to restore.
  - Audit: Who re-ran or cancelled what, append-only.
- Interaction: Open a failed run from the table: the dock names the stage it stopped at and shows the diff under test; Re-run failed stage queues it again — the graph, the nav badge and the audit trail agree, and the toast's Undo takes it back.
- Blocks: agent-ops-parts, audit-log-01 (https://elabs-ai.com/blocks/agent-ops-audit-log), workspace-shell
- Packages: @elabs-ai/components-charts, @elabs-ai/components-data, @elabs-ai/components-editor, @elabs-ai/components-flow, @elabs-ai/components-icons, @elabs-ai/components-terminal, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/developer-platform-page.json` (registry item `developer-platform-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-engineering-developer-platform--docs

## Developers — https://elabs-ai.com/templates/developers

- Scenario: The developer landing page: a code-first hero with install commands and switchable snippets, the process in three steps, the integrations wall, the trust and security band and a CTA banner — the page a developer reads before opening the docs.
- Blocks: marketing-code-example-01 (https://elabs-ai.com/blocks/marketing-code-example), marketing-cta-02 (https://elabs-ai.com/blocks/marketing-cta-banner), marketing-integrations-01 (https://elabs-ai.com/blocks/marketing-integrations), marketing-process-01 (https://elabs-ai.com/blocks/marketing-process), marketing-trust-01 (https://elabs-ai.com/blocks/marketing-trust), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/developers-page.json` (registry item `developers-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-developers--docs

## Energy Operations — https://elabs-ai.com/templates/energy-operations

- Domain: Energy & utilities
- Scenario: A utility's site desk runs the grid connection of eight industrial parks. The headline says who is buying above contract and who is near the capacity band; the table and the map name the same sites; picking one re-reads its 120 days of meters and opens its contract, its alarms and an analyst beside the screen.
- Views:
  - Sites: The fleet headline, the KPIs, the sites table and the map.
  - Alarms: Every open alarm, most severe first, with the runbook's response.
  - Map: The sites where they stand, status as colour, glyph and word.
  - Forecast: The selected site's meters against the day-ahead price.
  - Contracts: Supply agreements per site — supplier, price, end date.
  - Reports: Monthly cost and consumption per site.
- Interaction: Select a site in the table or on the map: the energy desk re-reads its meters, the dock opens with its contract and alarms, and Acknowledge steps the site down from alarm to watch — the nav badge and the row agree.
- Blocks: energy-desk-01 (https://elabs-ai.com/visualizations/command-centers-energy-desk), workspace-shell
- Packages: @elabs-ai/components-ai, @elabs-ai/components-charts, @elabs-ai/components-data, @elabs-ai/components-icons, @elabs-ai/components-maps, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/energy-operations-page.json` (registry item `energy-operations-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-energy-energy-operations--docs

## Enterprise Admin Console — https://elabs-ai.com/templates/enterprise-admin-console

- Scenario: The baseline-complete archetype-B console — the recommended starting point for a professional brand-ui app.
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-starters-enterprise-admin-console--docs

## Features — https://elabs-ai.com/templates/features

- Scenario: The features page: an alternating showcase of copy and product, tabs that switch the product screen, the bento grid for the smaller capabilities, the process in steps and the closing CTA.
- Blocks: marketing-bento-01 (https://elabs-ai.com/blocks/marketing-bento), marketing-cta-01 (https://elabs-ai.com/blocks/marketing-call-to-action), marketing-features-02 (https://elabs-ai.com/blocks/marketing-feature-showcase), marketing-features-03 (https://elabs-ai.com/blocks/marketing-feature-tabs), marketing-process-01 (https://elabs-ai.com/blocks/marketing-process), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/features-page.json` (registry item `features-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-features--docs

## Flow Workspace — https://elabs-ai.com/templates/flow-workspace

- Scenario: Flow workspace template — the canonical full-screen flow-workspace composition (app-shell + branded React Flow canvas).
- Scaffold: `npx -y @elabs-ai/components-cli create my-flow-workspace --template flow-workspace`
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-starters-flow-workspace--docs

## Forgot Password — https://elabs-ai.com/templates/forgot-password

- Scenario: The forgot-password page: the reset card (email in, confirmation out) centred in the site frame — the same route shape as sign-in and sign-up.
- Blocks: forgot-password-01 (https://elabs-ai.com/blocks/authentication-forgot-password), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/forgot-password-page.json` (registry item `forgot-password-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-forgot-password--docs

## Generative UI Assistant — https://elabs-ai.com/templates/generative-ui-assistant

- Domain: AI agents
- Scenario: An assistant that answers with screens. Five conversations — a refund decision, an analytics answer with charts, an incident form, a release plan, a surface the catalog refuses — stream in as A2UI data and render from the library's catalog; every click reaches the app as a named action.
- Views:
  - Assistant: The conversation and the surfaces it renders.
  - Conversations: The five saved conversations.
- Interaction: Click a rendered surface — approve the refund, change the form — and the inspector shows the action and the wire JSON that produced the screen.
- Blocks: a2ui-parts, workspace-shell
- Packages: @elabs-ai/components-ai, @elabs-ai/components-icons, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/a2ui-assistant-page.json` (registry item `a2ui-assistant-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-ai-products-generative-ui-assistant--docs

## Help Center — https://elabs-ai.com/templates/help-center

- Scenario: The help center landing: search with suggestions, categories with article counts, popular articles, the status/community/contact links, and the contact form for what the articles do not answer.
- Blocks: help-center-01 (https://elabs-ai.com/blocks/content-help-centre), marketing-contact-01 (https://elabs-ai.com/blocks/marketing-contact), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/help-center-page.json` (registry item `help-center-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-help-center--docs

## Incident Command — https://elabs-ai.com/templates/incident-command

- Domain: Engineering & reliability
- Scenario: One live incident, run from one screen. The commander sees severity, impact and the error rate streaming in; the blast radius is the dependency web; the runbook's steps print into a terminal, tick off and write the incident log until the last one settles the stream.
- Views:
  - Overview: Severity, impact, commander, the error rate live.
  - Incidents: Open and recent incidents.
  - Alerts: What is paging right now.
  - Promises: Service-level objectives and their budgets.
  - Services: Every service and its owner.
  - Dependencies: The dependency web the blast radius is read from.
  - Runbooks: The runbooks this team runs.
- Interaction: Run the runbook step by step: each step prints into the terminal, moves the recovery meter and writes the log; the last one unlocks Resolve.
- Blocks: infographic-dependency-web-01 (https://elabs-ai.com/visualizations/infographics-dependency-web), workspace-shell
- Packages: @elabs-ai/components-charts, @elabs-ai/components-terminal, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/incident-command-page.json` (registry item `incident-command-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-operations-incident-command--docs

## Integrations — https://elabs-ai.com/templates/integrations

- Scenario: The integrations page: a filterable wall of integration tiles with a request-an-integration link, the trust and security band that answers the data question, and a CTA banner.
- Blocks: marketing-cta-02 (https://elabs-ai.com/blocks/marketing-cta-banner), marketing-integrations-01 (https://elabs-ai.com/blocks/marketing-integrations), marketing-trust-01 (https://elabs-ai.com/blocks/marketing-trust), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/integrations-page.json` (registry item `integrations-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-integrations--docs

## Landing — https://elabs-ai.com/templates/landing

- Scenario: The classic marketing landing page: a release banner, the hero with its logo strip, the feature grid, a showcase that alternates copy and product, the stats band, testimonials, the pricing table, an FAQ and the closing CTA — with a cookie banner that stays out of the way until it is answered.
- Blocks: marketing-banner-01 (https://elabs-ai.com/blocks/marketing-banner), marketing-cookie-banner-01 (https://elabs-ai.com/blocks/marketing-cookie-banner), marketing-cta-01 (https://elabs-ai.com/blocks/marketing-call-to-action), marketing-faq-01 (https://elabs-ai.com/blocks/marketing-faq), marketing-features-01 (https://elabs-ai.com/blocks/marketing-features), marketing-features-02 (https://elabs-ai.com/blocks/marketing-feature-showcase), marketing-hero (https://elabs-ai.com/blocks/marketing-hero), marketing-pricing-01 (https://elabs-ai.com/blocks/marketing-pricing), marketing-stats-01 (https://elabs-ai.com/blocks/marketing-stats-and-logos), marketing-testimonials-01 (https://elabs-ai.com/blocks/marketing-testimonials), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/landing-page.json` (registry item `landing-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-landing--docs

## Logistics Control Tower — https://elabs-ai.com/templates/logistics-control-tower

- Domain: Operations
- Scenario: An operations team keeps this screen open all day. The headline counts the promises at risk; the map shows the network and the fleet; the exceptions table is sorted by the promise that breaks first, and a row opens the shipment with its recommended next step.
- Views:
  - Overview: The headline, the network map and the exceptions table.
  - Exceptions: Every late or at-risk shipment, closest promise first.
  - Shipments: All shipments in flight.
  - Fleet: Vehicles and vessels, live on the map.
  - Lanes: The lanes the network runs and their reliability.
  - Depots: Depots and their load.
  - Inventory: Stock per depot.
- Interaction: Click an exception: the dock opens with the shipment's details, the recommended next step and its journey as a timeline.
- Blocks: geo-fleet-tracker-01 (https://elabs-ai.com/blocks/maps-and-geo-fleet-tracker), geo-network-map-01 (https://elabs-ai.com/blocks/maps-and-geo-network-map), workspace-shell
- Packages: @elabs-ai/components-data, @elabs-ai/components-icons, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/control-tower-page.json` (registry item `control-tower-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-operations-logistics-control-tower--docs

## Market Desk — https://elabs-ai.com/templates/market-desk

- Domain: Revenue & markets
- Scenario: A rate desk at a logistics company prices container lanes for the week. The trader watches the tape, picks a lane from the watchlist and commits boxes on a ticket that checks the desk limit before anything is placed.
- Views:
  - Market: The tape: every lane's last price, move and twenty-day trend.
  - Watchlist: The lanes this desk trades; a row puts its lane on the ticket.
  - Charts: One lane in full — closes, volume, the desk's own marks.
  - Orders: The blotter: what went in today, at what price.
  - Positions: What the desk holds per lane and what it is worth now.
  - Limits: Ticket and book limits, and who signs above them.
  - Research: Notes and forecasts the desk writes for itself.
- Interaction: Pick a lane in the watchlist, enter boxes on the ticket, review and place the order — it lands in the blotter, and a ticket over the limit is refused with the reason.
- Blocks: command-center-market-tape-01 (https://elabs-ai.com/visualizations/command-centers-market-tape), workspace-shell
- Packages: @elabs-ai/components-charts, @elabs-ai/components-data, @elabs-ai/components-icons, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/market-desk-page.json` (registry item `market-desk-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-analytics-market-desk--docs

## Marketing — https://elabs-ai.com/templates/marketing

- Scenario: Marketing landing template — the canonical full-screen presales/landing composition: sticky nav + Hero + StatsBand + FeatureGrid + UseCaseCard row + LogoStrip + CTASection + footer (the standard section order).
- Scaffold: `npx -y @elabs-ai/components-cli create my-marketing --template marketing`
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-starters-marketing--docs

## Month-End Close — https://elabs-ai.com/templates/month-end-close

- Scenario: A month-end close workspace for controllers: a journal-entry DataGrid grouped by account with totals, in-place status and memo edits guarded by validation, saved views, Excel export and a Post approved bulk action with Undo, plus the cost-centre re-forecast tree and a summoned close assistant.
- Blocks: grid-cost-tree-01 (https://elabs-ai.com/blocks/data-grids-cost-centre-tree), grid-parts, workspace-shell
- Packages: @elabs-ai/components-charts, @elabs-ai/components-data, @elabs-ai/components-icons, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/finance-close-page.json` (registry item `finance-close-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-finance-month-end-close--docs

## Not Found — https://elabs-ai.com/templates/not-found

- Scenario: The 404 page: an empty-state panel with the two ways out (home, search the help center) inside the site frame, and the resources library so the visit is not wasted.
- Blocks: resources-01 (https://elabs-ai.com/blocks/content-resources), site-frame
- Packages: @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/not-found-page.json` (registry item `not-found-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-not-found--docs

## Object Detail Hub — https://elabs-ai.com/templates/object-detail-hub

- Scenario: Object Detail Hub — the master-detail screen the library was missing.
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-starters-object-detail-hub--docs

## Pricing — https://elabs-ai.com/templates/pricing

- Scenario: The pricing page: the plan cards with a monthly/yearly toggle, the full feature-by-plan comparison table, testimonials for reassurance, the pricing FAQ and the closing CTA.
- Blocks: marketing-cta-01 (https://elabs-ai.com/blocks/marketing-call-to-action), marketing-faq-01 (https://elabs-ai.com/blocks/marketing-faq), marketing-pricing-01 (https://elabs-ai.com/blocks/marketing-pricing), marketing-pricing-02 (https://elabs-ai.com/blocks/marketing-pricing-compare), marketing-testimonials-01 (https://elabs-ai.com/blocks/marketing-testimonials), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/pricing-page.json` (registry item `pricing-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-pricing--docs

## Process Explorer — https://elabs-ai.com/templates/process-explorer

- Domain: Operations
- Scenario: A process analyst opens an order-to-cash event log. The map shows how orders really flow; the insights beside it rank the slowest hand-overs and the throughput against the service level; variants, the dotted chart and the case table sit in the dock, all driven by one selection.
- Views:
  - Order to cash: The process map, its KPIs and the statistical insights.
- Interaction: Select an activity or a hand-over on the map: the insights, the variants and the case table re-read for it; replay animates every order as a token.
- Packages: @elabs-ai/components-charts, @elabs-ai/components-data, @elabs-ai/components-flow, @elabs-ai/components-icons, @elabs-ai/components-process, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/process-explorer-page.json` (registry item `process-explorer-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-operations-process-explorer--docs

## Product — https://elabs-ai.com/templates/product

- Scenario: The product page: gallery, options, price and add-to-cart in the site frame, then the reviews with their rating breakdown and a review form, and the newsletter.
- Blocks: marketing-newsletter-01 (https://elabs-ai.com/blocks/marketing-newsletter), product-detail-01 (https://elabs-ai.com/blocks/commerce-product-detail), product-reviews-01 (https://elabs-ai.com/blocks/commerce-product-reviews), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/product-page.json` (registry item `product-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-product--docs

## Product Landing — https://elabs-ai.com/templates/product-landing

- Scenario: A product-led variant of the landing page: the hero shows the product itself with live metrics and a sparkline, a marquee logo strip, feature tabs that switch the product screen, the bento grid, the big-number stats band, a testimonial spotlight and a CTA banner with social proof.
- Blocks: marketing-bento-01 (https://elabs-ai.com/blocks/marketing-bento), marketing-cta-02 (https://elabs-ai.com/blocks/marketing-cta-banner), marketing-features-03 (https://elabs-ai.com/blocks/marketing-feature-tabs), marketing-hero-02 (https://elabs-ai.com/blocks/marketing-hero-product), marketing-logos-01 (https://elabs-ai.com/blocks/marketing-logos), marketing-stats-02 (https://elabs-ai.com/blocks/marketing-stats-big-numbers), marketing-testimonials-02 (https://elabs-ai.com/blocks/marketing-testimonial-spotlight), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/product-landing-page.json` (registry item `product-landing-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-product-landing--docs

## Project Hub — https://elabs-ai.com/templates/project-hub

- Domain: Operations
- Scenario: A product team runs projects, an issue board, team load and members as one product. Every view reads the same issues, so a move on the board changes the load, the overview and the navigation counts.
- Views:
  - Overview: Projects and their state at a glance.
  - Projects: Project cards with progress and owners.
  - Issues: The board — drag an issue between columns.
  - Team load: Who holds how much, from the same issues.
  - Members: The team and their roles.
- Interaction: Move an issue on the board and watch the team load, the overview and the navigation counts follow; the dock explains the project or issue last opened.
- Blocks: kanban-board-01 (https://elabs-ai.com/blocks/application-kanban-board), project-cards-01 (https://elabs-ai.com/blocks/application-project-cards), settings-members-01 (https://elabs-ai.com/blocks/account-and-settings-members), workspace-shell
- Packages: @elabs-ai/components-charts, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/project-hub-page.json` (registry item `project-hub-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-product-teams-project-hub--docs

## Resources — https://elabs-ai.com/templates/resources

- Scenario: The resources library: a featured guide, resources filterable by type (guide, webinar, template, report), and the newsletter to be told about the next one.
- Blocks: marketing-newsletter-01 (https://elabs-ai.com/blocks/marketing-newsletter), resources-01 (https://elabs-ai.com/blocks/content-resources), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/resources-page.json` (registry item `resources-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-resources--docs

## Revenue Operations — https://elabs-ai.com/templates/revenue-operations

- Domain: Revenue & markets
- Scenario: A revenue team opens Monday with the number against plan. The period and region controls re-slice every chart and the pipeline below; a stalled deal is flagged from its own activity, and the analyst in the dock answers in the numbers on screen.
- Views:
  - Revenue desk: Revenue against plan, by segment and week, as one command center.
  - Pipeline: Every open deal with win probability, activity trend and a stalled flag.
  - Forecast: The quarter's forecast with its confidence band.
  - Targets: Targets per team and how far each is from them.
  - Accounts: The accounts behind the pipeline.
  - People: Owners, quotas and attainment.
  - Reports: Saved views the team shares.
- Interaction: Change the period or the region in the header and watch the charts and the pipeline re-slice; select pipeline rows to act on them together.
- Blocks: command-center-revenue-01 (https://elabs-ai.com/visualizations/command-centers-revenue-desk), workspace-shell
- Packages: @elabs-ai/components-charts, @elabs-ai/components-data, @elabs-ai/components-icons, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/revenue-ops-page.json` (registry item `revenue-ops-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-analytics-revenue-operations--docs

## Screen States — https://elabs-ai.com/templates/screen-states

- Scenario: Screen States — the full state grid the templates omit.
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-starters-screen-states--docs

## Security Operations — https://elabs-ai.com/templates/security-operations

- Domain: Security
- Scenario: A security team's triage screen. The headline says how many alerts are open, how many are critical and how old the oldest is; the queue and the map name the same assets; picking an alert opens its indicators, the alerts linked by the same user or host, and an analyst that has already enriched the indicators and waits for the approval to isolate the host.
- Views:
  - Queue: The headline, the KPIs, the alert queue under its filters and the map.
  - Assets: The open alerts clustered on the offices, data centres and cloud regions they fire from.
  - Incidents: Ninety days of incidents per source, read by the incident explorer.
  - Hunts: The hunts in progress and what they have found.
  - Detections: The rules in force, per source, and how often each fires.
  - Reports: Monthly volume, time to contain and the sources behind it.
- Interaction: Triage an alert from the queue or the map: the dock opens with its indicators and linked alerts, Contain asset isolates the host and steps the row to contained — the nav badge, the KPIs and the toast's Undo agree.
- Blocks: incident-explorer-01 (https://elabs-ai.com/visualizations/command-centers-incident-explorer), workspace-shell
- Packages: @elabs-ai/components-ai, @elabs-ai/components-charts, @elabs-ai/components-data, @elabs-ai/components-icons, @elabs-ai/components-maps, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/security-operations-page.json` (registry item `security-operations-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-security-security-operations--docs

## Settings — https://elabs-ai.com/templates/settings

- Scenario: Settings template — the canonical full-screen settings composition (app-shell + Descriptions + Wizard).
- Scaffold: `npx -y @elabs-ai/components-cli create my-settings --template settings`
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-starters-settings--docs

## Shop — https://elabs-ai.com/templates/shop

- Scenario: The shop page: the product grid with sort and quick add in the site frame, followed by the trust band and the newsletter.
- Blocks: marketing-newsletter-01 (https://elabs-ai.com/blocks/marketing-newsletter), marketing-trust-01 (https://elabs-ai.com/blocks/marketing-trust), product-grid-01 (https://elabs-ai.com/blocks/commerce-product-grid), site-frame
- Packages: @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/shop-page.json` (registry item `shop-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-shop--docs

## Sign In — https://elabs-ai.com/templates/sign-in

- Scenario: The sign-in page: the split login (form beside the brand aside) between the site's navbar and footer, with the sign-in link hidden from the navbar because you are already there.
- Blocks: login-02 (https://elabs-ai.com/blocks/authentication-login-split), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/sign-in-page.json` (registry item `sign-in-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-sign-in--docs

## Sign Up — https://elabs-ai.com/templates/sign-up

- Scenario: The sign-up page: the registration card with password strength and terms, centred in the site frame, with a logo strip below as reassurance.
- Blocks: marketing-logos-01 (https://elabs-ai.com/blocks/marketing-logos), register-01 (https://elabs-ai.com/blocks/authentication-register), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/sign-up-page.json` (registry item `sign-up-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-sign-up--docs

## Support Desk — https://elabs-ai.com/templates/support-desk

- Domain: Customers & support
- Scenario: A support agent works a queue sorted by the promise that breaks first. The conversation is in the middle, the customer and what solved it before on the right, and the copilot drafts a reply grounded in named past tickets that the agent sends or discards.
- Views:
  - My queue: The agent's tickets, the promise that breaks first on top.
  - Team queue: Everything the team holds.
  - Promises at risk: Tickets whose response or resolution promise is close.
  - Knowledge base: Articles the copilot cites.
  - Reports: Volume, response and resolution over time.
  - Help center: What customers see.
- Interaction: Open a ticket, send the drafted reply: the clock restarts and the queue re-sorts.
- Blocks: workspace-shell
- Packages: @elabs-ai/components-ai, @elabs-ai/components-icons, @elabs-ai/components-tokens, @elabs-ai/components-ui
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/support-desk-page.json` (registry item `support-desk-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-customers-support-desk--docs

## Talk to Sales — https://elabs-ai.com/templates/talk-to-sales

- Scenario: The talk-to-sales page: the booking form with the walkthrough agenda, hosts and time slots, the logo strip and a testimonial spotlight underneath for the person who is still deciding.
- Blocks: marketing-book-demo-01 (https://elabs-ai.com/blocks/marketing-book-a-demo), marketing-logos-01 (https://elabs-ai.com/blocks/marketing-logos), marketing-testimonials-02 (https://elabs-ai.com/blocks/marketing-testimonial-spotlight), site-frame
- Copy in: `npx shadcn@latest add https://elabs-ai.com/r/book-demo-page.json` (registry item `book-demo-page`; brings its blocks with it)
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-pages-talk-to-sales--docs

## Terminal Agent Session — https://elabs-ai.com/templates/terminal-agent-session

- Scenario: This is the first place the family's twelve components are seen together and against app chrome, rather than each in isolation.
- Storybook: https://elabs-ai.com/storybook/?path=/docs/patterns-templates-ai-products-terminal-agent-session--docs