Metric explorerPro
KPI cards that open into a scrubbable chart and morph between metrics and ranges.
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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { MetricExplorer } from 'animui/metric-explorer';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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.
import { MetricExplorer } from "animui/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.