Catalog

Each component installs as plain source into components/dithercn/. Drop one into your page as it is, read its source to see how it's made, or point your agent at one and ask for a variation. For anything not here, ask your agent or write your own.

Using an example

Install any example by its registry URL. It brings the engine with it the first time:

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add https://dithercn.dev/r/dither-gradient.json
Copy

Backgrounds fill the box you give them. Put one behind your content with absolute inset-0:

Copyimport { DitherGradient } from "@/components/dithercn/dither-gradient";
 
export function Hero() {
  return (
    <section className="relative isolate min-h-[480px]">
      <DitherGradient angle={160} className="absolute inset-0 -z-10" />
      <h1>Your headline</h1>
    </section>
  );
}

Backgrounds built on DitherShader share these props:

Charts and interface pieces take a color from the named palette and a fill of "gradient", "dotted", "hatched" or "solid". Each page lists every prop.