Search

Search components and blocks

Sign in

Dither Loader

A 'thinking' indicator for AI replies: a breathing orb rendered in ordered dither — pixels switch on and off against a Bayer threshold as the shape pulses and swirls — beside a status line that rolls through phrases with pulsing dots. Pick from three dither patterns (a breathing orb, a turning swirl, travelling ripples) in five colors.

pnpm dlx shadcn@latest add @ditherui/dither-loader
Reading your question...

orb

swirl

ripple

Install

$ pnpm dlx shadcn@latest add @ditherui/dither-loader

Props

phrasesstring[]["Reading your question", "Weighing the options", "Drafting an answer"]
pattern"orb" | "swirl" | "ripple""orb"
color"violet" | "emerald" | "sky" | "amber" | "rose""violet"
intervalnumber2200
speednumber1
pausedbooleanfalse
classNamestring—

Loader

Pro

A compact loading indicator. Nine blocks in a 3x3 cube; a wave sweeps diagonally from the top-left block to the bottom-right, each block swelling from a dot to full size and dimming back.

pnpm dlx shadcn@latest add @ditherui/loading

Props

variant"dither""dither"
sizenumber24
durationnumber1.6
pausedbooleanfalse
classNamestring—

When to use the dither loader

Use it as a thinking indicator for AI replies: a breathing orb drawn in ordered dither beside a status line that cycles through phrases.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components