Metrics & KPI

8 Variants

KPI Summary Grid

10M+

Components Rendered

99.99%

Uptime Guarantee

150k+

Active Developers

Analytics Stats Bar

API Response Latency

-32%

4.2ms

99th percentile across 12 edge regions with zero variance.

Total AST Mutations

+240%

1,892,104

Real-time bi-directional code transforms verified by MCP daemon.

Trend Analytics Cards

Active Subscribers

+18.4%

14,280

Monthly Goal (15k)

95%

Metric Stat KPI Card
KPI Summary Grid

10M+

Components Rendered

99.99%

Uptime Guarantee

150k+

Active Developers

Analytics Stats Bar

API Response Latency

-32%

4.2ms

99th percentile across 12 edge regions with zero variance.

Total AST Mutations

+240%

1,892,104

Real-time bi-directional code transforms verified by MCP daemon.

Trend Analytics Cards

Active Subscribers

+18.4%

14,280

Monthly Goal (15k)

95%

Metric Stat KPI Card

KPI Summary Grid

4-column metric summary card grid displaying revenue, growth, active users, and latency.

>npx @shavin/cli add metrics-kpi-grid

When to Use & Guidelines

  • Use in data-dense views where information hierarchy matters.
  • Fully responsive across desktop, tablet, and mobile breakpoints.
  • 100% semantic token purity — remaps seamlessly across all themes.
#metrics#kpi#dashboard

Analytics Stats Bar

Horizontal statistics bar designed to sit directly below hero banners or section dividers.

>npx @shavin/cli add metrics-stats-bar

10M+

Components Rendered

99.99%

Uptime Guarantee

150k+

Active Developers

When to Use & Guidelines

  • Fully responsive across desktop, tablet, and mobile breakpoints.
  • 100% semantic token purity — remaps seamlessly across all themes.
  • Accessible by default with proper ARIA roles and keyboard navigation.
#metrics#stats#horizontal

Trend Analytics Cards

Detailed analytics cards with contextual change indicators and baseline benchmarks.

>npx @shavin/cli add metrics-trend-cards

API Response Latency

-32%

4.2ms

99th percentile across 12 edge regions with zero variance.

Total AST Mutations

+240%

1,892,104

Real-time bi-directional code transforms verified by MCP daemon.

When to Use & Guidelines

  • Fully responsive across desktop, tablet, and mobile breakpoints.
  • 100% semantic token purity — remaps seamlessly across all themes.
  • Accessible by default with proper ARIA roles and keyboard navigation.
#metrics#trend#analytics

Metric Stat KPI Card

KPI metric card with large number display, trend indicator, and sparkline placeholder.

>npx @shavin/cli add card-stat-kpi

Active Subscribers

+18.4%

14,280

Monthly Goal (15k)

95%

When to Use & Guidelines

  • Fully responsive across desktop, tablet, and mobile breakpoints.
  • 100% semantic token purity — remaps seamlessly across all themes.
  • Accessible by default with proper ARIA roles and keyboard navigation.
#card#kpi#metric#stat

KPI Summary Grid

4-column metric summary card grid displaying revenue, growth, active users, and latency.

>npx @shavin/cli add metrics-kpi-grid

When to Use & Guidelines

  • Use in data-dense views where information hierarchy matters.
  • Fully responsive across desktop, tablet, and mobile breakpoints.
  • 100% semantic token purity — remaps seamlessly across all themes.
#metrics#kpi#dashboard

Analytics Stats Bar

Horizontal statistics bar designed to sit directly below hero banners or section dividers.

>npx @shavin/cli add metrics-stats-bar

10M+

Components Rendered

99.99%

Uptime Guarantee

150k+

Active Developers

When to Use & Guidelines

  • Fully responsive across desktop, tablet, and mobile breakpoints.
  • 100% semantic token purity — remaps seamlessly across all themes.
  • Accessible by default with proper ARIA roles and keyboard navigation.
#metrics#stats#horizontal

Trend Analytics Cards

Detailed analytics cards with contextual change indicators and baseline benchmarks.

>npx @shavin/cli add metrics-trend-cards

API Response Latency

-32%

4.2ms

99th percentile across 12 edge regions with zero variance.

Total AST Mutations

+240%

1,892,104

Real-time bi-directional code transforms verified by MCP daemon.

When to Use & Guidelines

  • Fully responsive across desktop, tablet, and mobile breakpoints.
  • 100% semantic token purity — remaps seamlessly across all themes.
  • Accessible by default with proper ARIA roles and keyboard navigation.
#metrics#trend#analytics

Metric Stat KPI Card

KPI metric card with large number display, trend indicator, and sparkline placeholder.

>npx @shavin/cli add card-stat-kpi

Active Subscribers

+18.4%

14,280

Monthly Goal (15k)

95%

When to Use & Guidelines

  • Fully responsive across desktop, tablet, and mobile breakpoints.
  • 100% semantic token purity — remaps seamlessly across all themes.
  • Accessible by default with proper ARIA roles and keyboard navigation.
#card#kpi#metric#stat
Configure Theme
Theme
Accent Color
Custom
Gray Family
Appearance
Radius
Scaling
Panel Style
Heading Font
Body Font