Stats / Metrics
Highlighted statistics or KPIs that communicate product impact at a glance
What is it?
Stats sections surface important numeric signals—usage counts, growth %, uptime—which help convey credibility and product value quickly.
Mockdown
``` ───────── Metrics ───────── 1M+ Users 99.99% Uptime 4.8/5 Average Rating ``` Characteristics: - Large numeric emphasis with short labels - Group related metrics for clarity - Consider animation counters or accessibility-friendly presentations
Layouts Using This Pattern
┌──────────┬────────────────────────────────────┐
│ ☰ Menu │ ◉ Dashboard 🔔 👤 │
│ ├────────────────────────────────────┤
│ ● Home │ ┌────────┐ ┌────────┐ ┌────────┐ │
│ ○ Stats │ │ ▲ 1,234│ │ ● 87% │ │ $9.4K │ │
│ ○ Users │ │ KPI ···│ │ KPI ···│ │ KPI ···│ │
│ ○ Config │ └────────┘ └────────┘ └────────┘ │
│ │ ┌──────────────────────────────┐ │
│ │ │ 📈 Chart │ │
│ │ │ ╱╲ ╱╲ ╱╲ │ │
│ │ │ ╱ ╲╱╱ ╲╱ ╲╱─── │ │
│ │ └──────────────────────────────┘ │
│ │ ┌──────────────────────────────┐ │
│ │ │ Name Role Status │ │
│ │ │ ───── ───── ──────── │ │
│ │ │ Alice Admin ● Active │ │
│ │ │ Bob User ○ Idle │ │
│ │ └──────────────────────────────┘ │
└──────────┴────────────────────────────────────┘Dashboard
SaaS Analytics Dashboard
A full-featured analytics dashboard with KPI cards, revenue charts, user activity tables, and a collapsible sidebar nav — ideal for SaaS admin panels.
--analytics--kpi--charts
Complex
┌───────────────────────────────────────────────┐
│ Logo Features Pricing ◆ Get Started │
├───────────────────────────────────────────────┤
│ │
│ Build something amazing. │
│ The fastest way to ship your app. │
│ │
│ [ Get Started ] [ Learn More → ] │
│ │
├───────────────────────────────────────────────┤
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ ⚡ Fast │ │ 🔒 Safe │ │ 📦 Easy │ │
│ │ Feature │ │ Feature │ │ Feature │ │
│ │ desc... │ │ desc... │ │ desc... │ │
│ └───────────┘ └───────────┘ └───────────┘ │
├───────────────────────────────────────────────┤
│ "Loved by 10,000+ developers" ★★★★★ │
├───────────────────────────────────────────────┤
│ Logo · Twitter · GitHub · © 2026 │
└───────────────────────────────────────────────┘Landing Page
SaaS Product Landing Page
A conversion-focused SaaS landing page with a hero section, feature grid, social proof, pricing preview, and a sticky CTA — built to drive sign-ups.
--hero--cta--features
Medium
Use these prompts to generate layouts built with this pattern.
Ready to build?
Use this pattern as inspiration when creating UI layouts with AI tools.