Metric card

A compact summary for a number that needs context.

npx shadcn@latest add @silicon-ui/metric-card
datasummary
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/metric-card

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/metric-card/metric-card.tsx
    • components/silicon-ui/metric-card/metric-card.module.css
    • components/silicon-ui/animated-counter/animated-counter.tsx shared
    • components/silicon-ui/animated-counter/animated-counter.module.css shared

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { MetricCard } from "@/components/silicon-ui/metric-card/metric-card";

API reference

PropTypeDefault
label*string—
value*number—
context*string—
suffixstring—
changestring—

Dependencies

npm
motion
Registry
silicon-motion-tokensanimated-counter