Data Display

Metric Card

A compact KPI card for dashboards and summary panels.

Preview

This is the same source that shadcn installs from the generated JSON.

Active users

24,892

+12.4%

Compared with the previous period

Install

After building the registry and starting the dev server, run this command in a consuming project.

installpnpm dlx shadcn@latest add http://localhost:3000/r/metric-card.json

Source and dependencies

Confirm the source path, registry dependencies, and npm dependencies before installing.

Source pathregistry/default/metric-card/metric-card.tsx

Registry dependencies

badgecard

NPM dependencies

lucide-react