Operations · Page template

Dashboard

KPI strip + chart + recent-activity list — the homepage of an internal tool.

app.example.com/dashboard
What it is

When to reach for it.

The first screen a logged-in user sees in most B2B apps. Four KPI cards across the top, a primary chart for trend at-a-glance, and a recent-activity list on the right rail. Designed to answer 'what should I care about right now?' in under five seconds.

  • Building the landing screen for an authenticated user.
  • Surfacing the top three or four metrics that drive a daily decision.
  • Replacing a 'home that's actually a list' with something more glanceable.
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

    Page header

    Title, date-range selector on the right.

    BreadcrumbHeadingButton
  2. 2

    KPI strip (4 cards)

    Each card has metric, delta vs. prior period, sparkline.

    StatCard
  3. 3

    Primary chart

    Defaults to time-series line; switch to bar via prop.

    Chart
  4. 4

    Recent activity

    Right-rail list, 5–8 items with avatar + timestamp.

    CardActivityFeed
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.

StatCardChartCardActivityFeedHeadingBreadcrumb
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
entityNameSalesPage title, KPI labels, chart axis
kpisMRR · NPS · CACThe four cards across the top
timeRangeDefaultLast 30 daysDate range picker initial value
⚡ 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 Dashboard 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.