Dither Kit

Composable, dithered charts for shadcn/ui — area, line, bar, pie & radar rendered on a tiny ordered-dither canvas engine. Recharts-style children-as-config API, entrance animations, a gliding scrub tooltip, selection, winking sparkles, and colour bloom.

Live demos & docs → tripwire.sh/dither-kit

Requires Tailwind CSS. The components are styled with Tailwind — without it, they render unstyled. Set up Tailwind and a shadcn project (components.json) first.

Install

The recommended way is the Dither Kit CLI, which adds a lockfile so you can update and diff your components later:

npx @dither-kit/cli add area-chart     # add a component
npx @dither-kit/cli list               # see what's available
npx @dither-kit/cli update             # pull upstream changes into your copy

See packages/cli for the full command reference.

Or install straight from this repo with the shadcn CLI (zero config, no lockfile). Each chart pulls the shared core engine (and its deps like motion + d3) automatically:

npx shadcn@latest add Boring-Software-Inc/dither-kit/area-chart

Available items:

npx shadcn@latest add Boring-Software-Inc/dither-kit/dither-kit   # all of it

Pin a ref if you want: …/dither-kit/area-chart#main.

Files land in components/dither-kit/. Then:

import { AreaChart, Area, XAxis, YAxis, Legend, Tooltip } from "@/components/dither-kit/area-chart"

const data = [{ month: "Jan", desktop: 186 }, { month: "Feb", desktop: 240 }]
const config = { desktop: { label: "Desktop", color: "blue" } }


  
  
  
  
  

• variant: gradient | dotted | hatched | solid
• bloom: off | low | high | aura

Repo layout

• registry/dither-kit/ — the component sources (sour