# Dashboard Scorecard

Executive Monthly Recurring Revenue (MRR) scorecard with a 30-day sparkline, percentage change and quarterly target.

- id: `dashboard-scorecard`
- Page: https://agentic-ui-kit.com/components/dashboard-scorecard
- Live preview: https://agentic-ui-kit.com/live/component/dashboard-scorecard

## Install

```bash
agentic-ui add dashboard-scorecard
npx shadcn@4.17.0 add @agentic-ui/dashboard-scorecard
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** metric-value-display, delta-calculation, trend-indicator, sparkline-microchart, timeframe-switching, polarity-inversion, interactive-scrubbing, target-progress-tracking, secondary-stats-breakdown, keyboard-navigation, accessible-aria-slider, empty-and-error-states, scorecard-grid
- **Intents:** track-status, compare-over-time, show-composition, explore-detail
- **Suits domains:** analytics, finance, saas, devops-status, operations, ecommerce
- **Interaction:** timeframe-switching, sparkline-scrubbing, sparkline-variant-toggle, keyboard-navigation, retry-action
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Executive Monthly Recurring Revenue (MRR) scorecard with a 30-day sparkline, percentage change and quarterly target, Real-time P99 latency monitoring card with inverted polarity (a decrease is green) and an SLA threshold, Widget tracking Daily Active Users (DAU) and conversion rate with a period selector (7D, 30D, 90D)
- **Avoid when:** Dense tables of individual transactions with dozens of non-aggregated columns (use table or responsive-table-to-cards), Complex multi-axis visualizations with more than 4 overlapping simultaneous time series (use chart-timeseries)
- **Preserve when adapting:** metric-delta-trend-composition, sparkline-vector-geometry, keyboard-scrubbing-contract, polarity-inversion-logic
- **Replace when adapting:** metric-title-and-units, timeframe-presets, target-thresholds
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives