cli
Add dithered charts from your terminal.
One command copies chart source into your React app and installs what it needs. You own every line.
What's a CLI?
A CLI, or command-line interface, is a program you run by typing a command in a terminal instead of clicking through a website. The DitherCharts CLI is called dithercharts, and it runs through npx, which comes with Node.js, so there's nothing to install first.
Like shadcn/ui, it copies source files instead of adding a package you can't change. The charts live in your repo, so you can read, edit and ship them like your own code.
install
Three commands to your first chart
You need Node 20 or later, a React 19 app with TypeScript, and a DitherCharts Pro. Tailwind and shadcn/ui are optional.
Log in
Log in once per machine. Your browser opens so you can confirm a code with your Pro account.
npx dithercharts login
*You need DitherCharts Pro to use the CLI.
Add a chart
From your app's folder, add charts by name. The CLI copies the source into src/components/dithercharts/ and installs d3-scale and d3-shape.
npx dithercharts add area-chart
Use it
Import the stylesheet once, then render the chart like any other component.
import "@/components/dithercharts/dithercharts.css" import { AreaChart } from "@/components/dithercharts/area-chart" <AreaChart label="Monthly revenue" data={data} config={config} xKey="month" />
Commands
add also takes --all, --dir <path>, --yes, --overwrite and --no-install.
| login | Sign in through the browser and save a key |
|---|---|
| add <names...> | Copy charts or controls into this project |
| list | List every chart and what's installed here |
| whoami | Show the signed-in account and plan |
| logout | Revoke this machine's key and forget it |
ai agents
Or ask your coding agent
Claude Code, Cursor and Copilot can run the CLI for you. Log in yourself once, then describe the chart you want and where it goes.
Prompts to try
Add a dithered area chart of monthly revenue to app/dashboard/page.tsx. Install it with npx dithercharts add area-chart.
Run npx dithercharts list, pick the best chart for comparing signups by plan, and add it to the analytics page.
Replace the bar chart in components/sales.tsx with the DitherCharts bar chart. Keep the same data and labels.
Install the DitherCharts button, select and switch controls, then use them in the settings form.
Agents can't answer the CLI's questions, so ask for --yes: it takes the default folder and keeps files you changed.
Questions
What is the DitherCharts CLI?
A command-line tool, published on npm as dithercharts, that copies dithered chart and form control components into your React app. You run it with npx, so there's nothing to install globally.
Is the CLI free?
The CLI itself is free on npm. Installing charts and controls with it needs DitherCharts Pro.
Does it work with Claude Code, Cursor and other AI coding agents?
Yes. Agents run shell commands, so they can run npx dithercharts add like you would. Log in yourself first, since login needs a browser, and have the agent pass --yes so the CLI asks nothing.
Which package managers does it support?
npm, pnpm, yarn and bun. The CLI reads your lockfile and installs dependencies with the same package manager.
How do I use it in CI?
Set DITHERCHARTS_API_KEY to a key from npx dithercharts login, then run npx dithercharts add as usual. Nothing opens a browser.
What does it change in my project?
It writes chart files into one folder, records installed versions in dithercharts.json, and adds d3-scale and d3-shape to package.json. Files you edited are only replaced if you say yes or pass --overwrite.
Every option and error is in the installation guide.