Search

Search components and blocks

Sign in

Dither Button

A square-cornered, hard-edged button. Hovering grows a dithered fill from the exact spot the pointer entered and follows it around, then shrinks away when you leave; the label stays crisp on top of it. Pressing sinks the button into its offset shadow. Needs lib/use-dither-spot.ts and lib/dither.ts, which the other dither components already share.

pnpm dlx shadcn@latest add @ditherui/dither-button

Install

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

Props

childrenReact.ReactNode—
size"sm" | "md" | "lg""md"
iconReact.ReactNode—
loadingbooleanfalse
...button propsReact.ComponentProps<"button">—

When to use the dither button

Use it for a hard-edged button with character. Hovering grows a dithered fill from the exact spot the pointer entered and follows it around.

  • 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