Sparkline

Show a compact trend beside a value.

npx shadcn@latest add @silicon-ui/sparkline
datachart
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/sparkline

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/sparkline/sparkline.tsx
    • components/silicon-ui/sparkline/sparkline.module.css

  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 { Sparkline } from "@/components/silicon-ui/sparkline/sparkline";

API reference

PropTypeDefault
data*number[]—
label*string—
valuestring—
changestring—
tone"accent" | "success" | "warning" | "danger""accent"
widthnumber160
heightnumber52
labels

One label per point, such as a date. It replaces the change while that point is scrubbed.

string[]—
formatValue

Formats a scrubbed point for the headline. Defaults to a grouped number.

(value: number, index: number) => string—
area

A quiet neutral fill under the line.

booleantrue
interactive

Pointer and keyboard scrubbing through the points.

booleantrue

Dependencies

npm
motion
Registry
silicon-motion-tokens