boring-software-inc/dither-kit — explained in plain English
Analysis updated 2026-05-18
Add dithered, retro-styled charts (area, line, bar, pie, radar) to a shadcn/ui React project.
Install and update chart components with a lockfile-tracked CLI so upstream changes can be pulled in later.
Use standalone dithered UI pieces like generative pixel avatars, buttons, and gradient washes outside of charts.
Customize a chart's fill style and glow intensity using the variant and bloom props.
| boring-software-inc/dither-kit | gaearon/woodshed | denissergeevitch/chatgpt-portal | |
|---|---|---|---|
| Stars | 65 | 65 | 66 |
| Language | TypeScript | TypeScript | TypeScript |
| Last pushed | — | 2026-01-13 | — |
| Maintenance | — | Quiet | — |
| Setup difficulty | easy | moderate | moderate |
| Complexity | 2/5 | 3/5 | 3/5 |
| Audience | developer | pm founder | developer |
Figures from each repo's GitHub metadata at analysis time.
Requires an existing Tailwind CSS and shadcn/ui project setup before the components will render styled.
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.
A TypeScript component library adding dithered, retro-styled area, line, bar, pie, and radar charts to shadcn/ui projects.
Mainly TypeScript. The stack also includes TypeScript, React, Tailwind CSS.
Setup difficulty is rated easy, with roughly 30min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
double-check against the repo, no cap.