Record · Page template

Detail Screen

Record header + tabbed main + side rail metadata — the canonical record page.

app.example.com/customers/1742
What it is

When to reach for it.

A generic detail view for any single record: order, account, ticket, project. Header strip up top with the record's identity + status + primary actions, a tabbed main area for the heavy content (overview / activity / files / related), and a right-side metadata rail with the fields that don't need to be in the user's face. The template you reach for whenever a user clicks a row.

  • Building the page a user lands on after clicking a row in a list.
  • Surfacing many facets of a single record without losing the at-a-glance summary.
  • Replacing a 'detail page' that's actually a modal — once a record has more than ~10 fields, it deserves its own page.
Structure

What's in the template.

Each section pre-wired with the right CleenUI primitives. Swap, remove, or extend any of them — the template is a starting point, not a constraint.

  1. 1

    Record header

    Record name, status pill, primary actions on the right.

    BreadcrumbHeadingPillBadgeButton
  2. 2

    Tabbed main

    Overview / Activity / Files / Related — the deep content lives here.

    TabsCardEditableCard
  3. 3

    Metadata rail

    Right-side fields: owner, created, modified, tags, IDs.

    CardInfoLabelsAvatar
Components used

Everything this template touches.

All of these are in the catalog — the Builder skill imports them automatically. Each chip links to that component's page.

TabsEditableCardAvatarPillBadgeInfoLabelsBreadcrumbCard
What you customize

Substitutions.

When the Builder skill scaffolds this template for you, these are the fields it asks about — or infers from your prompt.

FieldExampleWhere it appears
recordNounOrderPage title, breadcrumb, header
tabNamesOverview, Activity, FilesTabs label list
metaFieldsOwner, Created, Modified, TagsMetadata rail rows
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Ask your AI agent to scaffold this template in your project — the Builder skill knows the Detail Screen layout and the components it uses.

Get started

Get started with CleenUI.

Two paths to your first component. Pick the one that fits how your team builds.

Path A · Recommended

With AI agent skills

One prompt to your AI tool. The Setup skill handles dependencies, design tokens, build config, and component registration — all without leaving your editor.

Path B · Manual

With npm

The classic flow. Install the package, import the styles, drop in your first component. No agents required — same end result.