git404hub

what is dither-kit fr?

boring-software-inc/dither-kit — explained in plain English

Analysis updated 2026-05-18

65TypeScriptAudience · developerComplexity · 2/5Setup · easy

tl;dr

A TypeScript component library adding dithered, retro-styled area, line, bar, pie, and radar charts to shadcn/ui projects.

vibe map

mindmap
  root((Dither Kit))
    What it does
      Dithered chart components
      Standalone UI pieces
      Children-as-config API
    Tech stack
      TypeScript
      React
      Tailwind CSS
      shadcn/ui
    Use cases
      Add retro-style charts
      Track updates via CLI
      Use standalone pieces
    Audience
      React developers
      shadcn/ui users

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Add dithered, retro-styled charts (area, line, bar, pie, radar) to a shadcn/ui React project.

VIBE 2

Install and update chart components with a lockfile-tracked CLI so upstream changes can be pulled in later.

VIBE 3

Use standalone dithered UI pieces like generative pixel avatars, buttons, and gradient washes outside of charts.

VIBE 4

Customize a chart's fill style and glow intensity using the variant and bloom props.

what's the stack?

TypeScriptReactTailwind CSSshadcn/uiD3

how it stacks up fr

boring-software-inc/dither-kitgaearon/woodsheddenissergeevitch/chatgpt-portal
Stars656566
LanguageTypeScriptTypeScriptTypeScript
Last pushed2026-01-13
MaintenanceQuiet
Setup difficultyeasymoderatemoderate
Complexity2/53/53/5
Audiencedeveloperpm founderdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 30min

Requires an existing Tailwind CSS and shadcn/ui project setup before the components will render styled.

in plain english

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.

prompts (copy fr)

prompt 1
Install dither-kit's area-chart component into my shadcn/ui project using the CLI.
prompt 2
Show me how to build a bar chart with dither-kit using the children-as-config API.
prompt 3
Explain the difference between the gradient, dotted, hatched, and solid chart variants in dither-kit.
prompt 4
Help me set up Tailwind CSS and shadcn/ui so dither-kit's components render correctly.

Frequently asked questions

what is dither-kit fr?

A TypeScript component library adding dithered, retro-styled area, line, bar, pie, and radar charts to shadcn/ui projects.

What language is dither-kit written in?

Mainly TypeScript. The stack also includes TypeScript, React, Tailwind CSS.

How hard is dither-kit to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is dither-kit for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.