Dither Kit

ディザリング表現のチャートをReactで使えるコンポーネントキット。Bar、Radar、Sparklineなど5種類のチャートタイプを、1つの小さなCanvasエンジンに統合している。APIはrecharts風に子要素で構成する方式。

見た目の作り込みが特徴で、塗りは順序ディザリング。variantでgradient、dotted、hatched、solidを切り替えられて、bloomを指定すると発光をaura等の強さで乗せられる。カラーは7色。インタラクションも一通り揃っていて、スクラブ操作、凡例ホバーで対象シリーズのスポットライト表示、クリックでのロックに対応する。interactiveをfalseにすると、クロスヘアやツールチップを消して装飾のスパークだけ残すこともできる。

配布はshadcn形式のレジストリで、components.jsonに@dither-kitネームスペースを登録して導入する。Claude CodeやCursorなどのエージェントにそのまま貼って使えるとも書かれている。