boring-software-inc/dither-kit

Dither Kit is a collection of chart components for React projects that use shadcn/ui, a popular library of copy paste UI components built on Tailwind CSS. What makes these charts different from ordinary chart libraries is their visual style: instead of smooth gradients and solid fills, every chart is rendered through a small dithering engine that gives lines, areas, bars, pie slices, and radar shapes a stippled, retro screen printed look, similar to old computer graphics. The kit covers the common chart types: area and line charts, which also include a compact sparkline version, grouped or stacked bar charts, pie and donut charts, and radar charts. Beyond charts, it also includes a few standalone dithered pieces you can use on their own, like generative pixel style avatars, buttons, and gradient washes. Charts are built using a children as configuration pattern similar to the popular Recharts library, so you compose a chart out of pieces like axis, legend, and tooltip components rather than passing one big configuration object. Extra touches include entrance animations when a chart first appears, a tooltip that glides smoothly as you move your cursor across the data, selectable legend items, small sparkle effects, and an optional colored glow called bloom that can be turned off or set to different intensities. Because the components are styled with Tailwind CSS, you need Tailwind and an existing shadcn project already set up before installing anything, otherwise the charts render with no styling at all. There are two ways to add components: a dedicated command line tool that keeps track of what you installed in a lockfile so you can later check for and pull in updates, or the standard shadcn command line tool, which copies the files into your project with no tracking. Individual chart types can be added on their own, or everything can be installed at once. The project is written in TypeScript and credits an existing project called Evil Charts as the inspiration for this dithered chart style.