Dithered 404
A dithered 404 that your cursor burns into embers and smoke, then rebuilds.
Preview
Installation
pnpm dlx shadcn@latest add @23rd/dithered-404Or from the public GitHub registry:
pnpm dlx shadcn@latest add radiumcoders/23rd.dev/dithered-404Usage
Pin it inside a relatively positioned section.
"use client"
import { Dithered404 } from "@/components/ui/dithered-404"
export function NotFound() {
return (
<section className="relative isolate min-h-svh overflow-hidden bg-background">
<Dithered404 color="#E8B45A" />
<div className="relative z-10 flex min-h-svh flex-col items-center justify-end px-6 pb-16 text-center">
<p className="text-sm text-muted-foreground">
This page could not be found.
</p>
</div>
</section>
)
}Lock the theme:
<Dithered404 theme="light" />
<Dithered404 theme="dark" />Soft fire instead of Bayer pixels:
<Dithered404 dither={false} />Props
| Prop | Type | Default |
|---|---|---|
color | string | theme ink |
pixelSize | number | 4 |
brush | number | 28 |
interactive | boolean | true |
dither | boolean | true |
theme | "light" | "dark" | "auto" | auto |
className | string | React only |
class | string | Svelte only |