Metric Flows

MORE FRAMER COMPONENTS LIKE THIS

✦ Browse +38 FREE + 85 premium components: https://frameze.com/components

About Metric Flows

metricFlows is a dashboard kit that puts three metric layouts in one component: radial gauges, goal progress bars, and KPI stat cards. Rings fill on scroll, numbers count up, and colors shift by threshold so health, targets, and trends read at a glance. Switch dark or light theme, then drop it on SaaS dashboards, status pages, and quarterly goal boards.

Three layouts in one file — GaugeFlow, ProgressFlow, and StatFlow

Radial gauges with good / warning / danger threshold colors

Invert mode for metrics where higher is worse (CPU, storage)

Goal cards with icons, count-up values, and a Reached state

KPI stat cards with trend badges and optional sparklines

Scroll-triggered count-up with configurable duration

Dark and light themes with shared card styling

Responsive CSS grid — no horizontal scroll, cards wrap by min width

Property controls for data, colors, ring thickness, and card width

Static renderer safe — animations pause on the Framer canvas

Use Cases

SaaS product dashboards and admin home screens

Status pages and infrastructure health walls

Quarterly OKR and revenue goal boards

Analytics marketing sections on landing pages

Investor updates and board-meeting decks

Support ops and SLA monitors

Fitness, finance, and habit-tracking dashboards

Agency portfolio case-study result blocks

Internal tools and startup metric mockups

Editorial data stories and report pages

Keywords

dashboard framer, kpi cards framer, radial gauge framer, progress bar dashboard, stat cards, goal tracker component, sparkline cards, count up animation, threshold gauge, saas dashboard framer, status page metrics, okr progress cards, dark mode dashboard