Sparkline

Compact inline price marks for watchlists, token tables, and portfolio rows.

Line

filled

Watchlist

Manual installation

Prefer to copy by hand? Open the Code tab on any example above and switch to the file you need — every source file is there, not just the demo. Drop them in your project like this:

• chart-kit.tsx→components/spectrumui/charts/chart-kit.tsx
• sparkline-chart.tsx→components/spectrumui/charts/sparkline-chart.tsx

Then install its dependencies: npm i recharts framer-motion

Usage

import { Sparkline } from '@/components/spectrumui/charts/sparkline-chart';

<Sparkline data={series} filled />

• framed={false} drops the frame so it sits inline in a table row.