Insights · Page template

Analytics

Charts, KPIs, and drill-downs — the story your data tells, organized for decisions.

app.example.com/dashboard
What it is

When to reach for it.

Multi-chart analytics page with a KPI strip on top, three or four primary visualizations underneath, and a filter rail down the left side. Designed for the user who needs to ask 'what's happening?' and then 'why?' without leaving the page.

  • Building a reporting page where users explore trends rather than complete a transaction.
  • Surfacing aggregated metrics with the ability to slice by dimension.
  • Replacing a dashboard that's outgrown its homepage role and needs 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

    Filter rail

    Left rail of pinned filters; date range, segment, channel.

    FilterChipFilterDrawer
  2. 2

    KPI strip

    Three or four cards showing top-level numbers + delta.

    StatCard
  3. 3

    Primary chart

    Time-series — the headline metric over time.

    Chart
  4. 4

    Comparison grid

    Two or three smaller charts side by side for cross-cuts.

    ChartCard
  5. 5

    Drill-in table

    Row-level data that backs the charts above.

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

ChartStatCardFilterChipFilterDrawerDataGridWithFiltersCard
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
metricRevenueKPI labels, chart titles, page title
timeRangeLast 90 daysDate range picker default
segmentDimensionRegionComparison grid axis
⚡ 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 Analytics 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.