Installation
Set up Plotcn for your stack. Choose your framework and package manager. Plotcn will show only the commands and configuration required for your project.
Choose your framework
Select your application framework to configure tailored scaffolding and setup commands.
Requirements
Ensure your environment satisfies the requirements for your selected framework before proceeding:
- Node.js 18.18.0 or newer (Node 20+ LTS recommended)
- Next.js 14, 15, or 16 with App Router
- Tailwind CSS v4 or v3 with CSS variables
- TypeScript enabled
Create your project
Scaffold a clean project configured with your framework, TypeScript, Tailwind CSS, and shadcn/ui:
Run the initialization command below to scaffold your Next.js project configured with TypeScript, Tailwind CSS, and shadcn/ui:
pnpm dlx shadcn@latest init --template nextInitialize shadcn/ui
Plotcn visualizations are native React components designed around the shadcn/ui architecture. Initialize shadcn in your project:
If you already have an existing project and only need to initialize shadcn/ui, execute:
pnpm dlx shadcn@latest initConfigure Plotcn
Plotcn distributes copy-paste visualizations through the open shadcn registry specification. Add the Plotcn registry to your project configuration:
Plotcn follows shadcn/ui's open registry specification. Add the Plotcn registry to your components.json file under the registries property:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui"
},
"registries": {
"@plotcn": "https://plotcn.vercel.app/r/{name}.json"
}
}shadcn add https://plotcn.vercel.app/r/line.jsonInstall your first visualization
Add your first visualization component directly into your project's components/charts directory:
pnpm dlx shadcn@latest add @plotcn/lineVerify your setup
Ensure your project resolves Plotcn components, dependencies, and theme CSS variables properly:
Verify that the component renders and resolves theme tokens in your page:
import { PlotLineChart } from "@/components/charts/plot-line-chart"
const data = [
{ label: "Jan", value: 1200 },
{ label: "Feb", value: 1800 },
{ label: "Mar", value: 2600 },
]
export function OverviewChart() {
return (
<div className="h-[280px] w-full">
<PlotLineChart data={data} label="Sessions" />
</div>
)
}Next steps
Explore the core concepts and customize Plotcn visualizations for your product:
- Project Setup — Verify path aliases and Tailwind CSS configuration.
- shadcn Setup — Deep-dive into
components.jsonoptions. - Theming — Customize Cartesian and geometric chart color tokens.
- Usage Guide — Learn the standard component API and props pattern.