Skip to content
Sections · dashboard-preview · variants

Dashboard preview · 10 layouts

Same primitives, different stories. From callouts to walkthroughs.

v01 · browser-frame-callouts
Preview

See it before you ship it.

The whole product, hovering in space, with the highlights called out.

Revenue
$48.2k
Active
1,284
Churn
2.1%
NPS
+62
Real-time KPIs
Drag-to-resize
Surface-aware
v02 · side-callout-list
Revenue
$48k
Active
1,284

Tour the surface.

  1. 1

    Real-time KPIs

    Numbers stream in. No refresh button.

  2. 2

    Drag-to-resize widgets

    Snap to tokens, never to pixels.

  3. 3

    Surface-aware theming

    One control, the whole dashboard re-skins.

  4. 4

    Export anywhere

    CSV, PDF, JSON — and a live embed.

v03 · multi-device-mockup

Desktop and mobile. Same project.

Container queries deliver the same shape across every viewport.

Sales
$48k
Visits
12.4k
v04 · annotated-marker-style

Every detail, flagged.

Revenue
$48k
Active
1,284
Churn
2.1%
NPS
+62
A · sidebar nav
B · live KPI
C · chart bar
D · drill-in
v05 · video-walkthrough
2 minute walkthrough

Watch a real day.

Screen-recorded onboarding through deployment. No music, no narration — just the work.

Play walkthrough →
v06 · holographic-projection
Holographic

Projected from the substrate.

A glowing halo + base reflection make the frame feel projected. Pure CSS.

Revenue
$48k
Active
1,284
Churn
2.1%
NPS
+62
v07 · multi-tab-cycler

Three views. One frame.

Users
12,481
Sessions
36,210
Signups
+812
Activation
74%
MRR
$48.2k
Net
+$3.8k
v08 · zoom-in-detail
Revenue
$48k
Active
1,284
Hover to zoom out

Zoomed where it matters.

Start zoomed into the key card. Hover the section to pull back and see the whole dashboard.

Tour the surface →
v09 · chart-stagger
Animated · scroll-aware

Charts that build themselves.

JanMarMayJulSepNov
v10 · spotlight-with-arrows

Sequenced reveal.

KPI tiles
Live chart
Drill-in
Surface toggle
Revenue
$48k
Active
1,284
Churn
2.1%
NPS
+62
↩ Canonical layout
All sections