React Simple Line Chart

Your starting point for React line charts. This clean visualization connects data points with smooth curves (type="natural"), emphasizing the flow and direction of trends over time. The line clearly shows growth, decline, and patterns without visual clutter. Built with Recharts and styled to match shadcn/ui, it's the chart you'll reach for most often in Next.js dashboards—revenue trends, user growth, page views, or any metric where the story is in the movement. Start here and add features (dots, labels, multiple lines) as you need them.

React Simple Line Chart preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/line-simple.json

npx shadcn@latest add https://www.shadcn.io/r/line-simple.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/line-simple.json

bunx shadcn@latest add https://www.shadcn.io/r/line-simple.json

Related Components

FAQ