Growth Chart: free React illustration

Install

Run this in any project set up for the shadcn CLI. It copies the Growth Chart source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/growth-chart.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { GrowthChart } from "@/components/growth-chart";

export default function Page() {
  return <GrowthChart />;
}

Built with

A free React illustration in the Celebrations collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

npm: lucide-react, motion

Props

Read from the Growth Chart source. Everything is optional unless it says required.

Prop	Type	Default
data	GrowthChartPoint[]	defaultData
title	string	"Record month"
format	(value: number) => string	(v) => `$${Math.round(v).toLocaleString("en-US")}`
hue	GrowthChartHue	"emerald"
loop	boolean	true
className	string	—

More in Celebrations

238

Inbox Zero

A tidy desk for the moment the inbox empties: the last email folds into a paper plane, loops out through the window, the counter rolls to zero and the dusk sky turns to day.

239

Plant Progress

A seedling that grows with your progress value – the stem climbs, a leaf unfurls at each step, and at 100% it flowers.

258

Gift Box

A referral reward that wobbles with anticipation: the bow unties, the lid pops off and lands beside it, and a credit coupon rises out in a warm glow with a few sparkles.