Metric explorer
ProKPI cards that open into a scrubbable chart and morph between metrics and ranges.
Live block · sample data
Growth metrics
Parcelwise · updated Sep 22, 2026 at 09:00 UTC
- The top of a SaaS analytics or finance page with KPI cards that open into a chart.
- Dashboards where people move between a few metrics and date ranges.
- Use stat-card or metric-card for static KPI tiles.
- Use revenue-explorer for a revenue breakdown with a range brush.
- Use metrics-dashboard for a full dashboard layout.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this at the top of a SaaS analytics or finance page. Replace the seeded series in metric-data.ts with daily values from your warehouse or metrics API; the range and comparison math stay the same.
example.tsx
import { MetricExplorer } from "@/components/arc/blocks/metric-explorer/metric-explorer"; export default function AnalyticsPage() { return ( <main> <MetricExplorer /> </main> );}MetricExplorer
A row of KPI cards that morph open into a scrubbable chart with metric tabs and a range switch. Takes no props; series and ranges are sample data in metric-data.ts.
No props.
- Arrow leftorArrow right
- On the metric tabs, switches metric; on the chart, steps back or forward one interval.
- HomeorEnd
- Jumps to the first or last metric tab, or the first or last point in range.
- Escape
- Clears the scrubbed point, then closes the chart back to its card.
- Each card is a button whose label reads the value, change and range.
- The open chart uses a tablist and tabpanel, and the scrubber is a role="slider" with a dated aria-valuetext.
- The close button advertises Escape with aria-keyshortcuts, and a polite live region announces changes.
- A card's surface morphs into the chart panel with a shared layout transition and back on close.
- The line morphs between metrics and ranges, and the tab highlight slides with the selection.
- Reduced motion replaces the morph and slides with instant changes.
- Four cards per row drop to two below a 760px container.
- Below 640px tab values hide and the readout stacks; below 440px card padding and values shrink.
- The chart uses touch-action pan-y, so touch scrubbing does not block page scroll.
- Opening a card morphs one shared surface with a layoutId, and ResizeObservers fit the chart and tab indicator.
- SVG charts over daily series; aggregate long histories before passing them in.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use at the top of a SaaS analytics or finance page.
- Replace the seeded series in metric-data.ts with daily values from your warehouse; range and comparison math stay the same.
The full library index for assistants is at /llms.txt.