为什么值得关注

它通过独特的抖动美学赋予 shadcn/ui 图表新颖的视觉风格，结合类似 Recharts 的 API、入场动画、擦洗提示、选择、闪烁效果和色彩光晕——所有这些都由一个轻量级画布引擎驱动。

适合谁使用

使用 shadcn/ui 和 Tailwind CSS 的 React 开发者
寻求独特图表视觉风格的设计师和前端工程师
构建具有复古/像素艺术风格仪表盘或数据可视化的团队

典型使用场景

在基于 shadcn/ui 的仪表盘中添加动画抖动图表
创建带有图表动画的视觉吸引人的作品集或营销页面
构建支持选择和提示交互的数据探索工具
通过支持锁文件的 CLI 快速原型化图表密集型界面

项目优势

可组合的 children-as-config API，熟悉 Recharts 的用户易于上手
支持多种图表类型（面积、折线、柱状、饼图、雷达图）以及独立的头像、按钮和渐变组件
内置入场动画、擦洗提示、选择、闪烁效果和色彩光晕
通过专用 CLI 或 shadcn CLI 安装简洁，自动处理依赖关系

使用前须知

需要 Tailwind CSS 和 shadcn/ui 项目环境，否则组件将无样式渲染
仅适用于 React 项目（无框架无关的支持）
对于非常大的数据集或复杂动画，抖动画布引擎的性能可能需要权衡

README 快速开始

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:

item	what you get
`area-chart`	area + line charts, includes `Sparkline`
`bar-chart`	grouped / stacked bars
`pie-chart`	pie / donut
`radar-chart`	radar
`avatar`	generative mirrored pixel avatars (standalone)
`button`	dithered buttons (standalone)
`gradient`	dithered gradient washes (standalone)
`core`	shared chart engine (installed automatically by the charts)
`dither-kit`	everything at once

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

项目描述

Composable, dithered charts for shadcn/ui — area, line, bar, pie & radar. Docs: tripwire.sh/dither-kit

dither-kit