How do I install the icon transition?

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.

Set the variant prop on the component.

Icon Transition · Blurred

Q: Which variants are there?

An instant cut, a blur-to-sharp crossfade, or blur combined with a scale pop.

Swaps one icon for another, with the swap style controlled entirely by the variant prop: an instant cut, a blur-to-sharp crossfade, or blur combined with a scale pop.

pnpm dlx shadcn@latest add @ditherui/icon-transition

Direct

Blur

Blur + Scale

Install

$ pnpm dlx shadcn@latest add @ditherui/icon-transition

Props

PropTypeDefault

iconReact.ReactNode—

transitionKeyReact.Key—

variant"direct" | "blur" | "blur-scale""blur"

blurnumber6

durationnumber0.22

classNamestring—

When to use the icon transition

Use it to swap one icon for another, for example play to pause. The variant prop sets the style.

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

New
BadgeStatus and category badges with subtle motion.
ProgressProgress bars that fill with a spring.
SliderRange sliders with a responsive thumb.