Components
Sparkline
An inline mini chart that drops naturally into text and table cells.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/sparkline.jsonProps
PropTypeDefaultDescription
animateOnMountbooleantrueAnimates the component when it first renders.
colorstring—
Overrides the main accent or stroke color.
data*number[]—
Data used to render the component.
heightnumber32Sets the rendered height in pixels.
idstring—
Optional stable id used for sketch seeding and accessibility.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
typeSparklineType"line"Controls the visual variant or drawing style.
widthnumber80Sets the rendered width in pixels.
Types
Line
Area
Bar
Inline in text
Revenue is up
this quarter.
Custom color and size
Accessibility
Sparkline is intentionally compact and should be paired with adjacent text that explains what the trend represents. Treat it as decorative context unless you also expose the values elsewhere.
Examples
import { Sparkline } from "@/components/crumble/ui/sparkline";
<Sparkline data={[40, 55, 45, 60, 50, 70, 65, 80]} />;