Metric Card

component

A headline metric card with a smooth line (or bar) chart washed into its right side, a trend badge coloured by direction, a line/bar toggle, and a period dropdown with an optional custom-range calendar.

pnpm dlx shadcn@latest add "https://bash-ui-registry.vercel.app/r/metric-card.json"

Sign In

Metric Card

component

A headline metric card with a smooth line (or bar) chart washed into its right side, a trend badge coloured by direction, a line/bar toggle, and a period dropdown with an optional custom-range calendar.

pnpm dlx shadcn@latest add "https://bash-ui-registry.vercel.app/r/metric-card.json"

date-range-calendar

components/metric-card.tsx

date-range-calendar

components/metric-card.tsx