Using the Shadcn CLI

RosenCharts supports the Shadcn CLI, so you can import our charts into your project with a simple command.

This page is the fastest way to install Rosen Charts React components in a React or Next.js project using the shadcn CLI workflow.

How do I install Rosen Charts with shadcn CLI?

Run this command to install all Rosen Charts:

npx shadcn@latest add https://rosencharts.com/r/charts.json

If you only want one chart family (for example funnel charts), install the category JSON instead.

Importing all charts

npx shadcn@latest add https://rosencharts.com/r/charts.json

Importing all charts from a category

npx shadcn@latest add https://rosencharts.com/r/area-charts.json

Options are: area-charts, bar-charts, bubble-charts, donut-charts, funnel-charts, heatmap-charts, line-charts, pie-charts, radar-charts, scatter-charts, treemap-charts

Importing a specific chart

npx shadcn@latest add https://rosencharts.com/r/area-chart.json

To find out which charts are available, you can check the 'target' field in each chart in the category page. E.g. Area Charts.

Explore Rosen Charts

Most searched chart installs

If you need a specific chart type, start by importing a category and then refine from there:

• funnel chart shadcn: install Rosen funnel charts with npx shadcn@latest add https://rosencharts.com/r/funnel-charts.json
• shadcn treemap: install Rosen treemap charts with npx shadcn@latest add https://rosencharts.com/r/treemap-charts.json
• shadcn scatter chart: install Rosen scatter charts with npx shadcn@latest add https://rosencharts.com/r/scatter-charts.json
• shadcn donut chart: install Rosen donut charts with npx shadcn@latest add https://rosencharts.com/r/donut-charts.json

Continue exploring

After installation, use these pages to evaluate fit and implementation strategy:

• Recharts vs Rosen Charts
• shadcn/ui Charts vs Rosen Charts
• Next.js RSC charts without use client
• Migration guide from Recharts