How do I install the switch?

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.

What is different from the default?

A spring thumb, a press-down squish on tap and a smoother track color fade.

Switch

The shadcn Switch with a spring-driven thumb instead of a CSS transition, for a snappier, slightly bouncy toggle — plus a press-down squish on tap and a smoother track color fade.

pnpm dlx shadcn@latest add @ditherui/switch

Airplane mode

Wi-Fi

Small size

Disabled

Install

$ pnpm dlx shadcn@latest add @ditherui/switch

Props

PropTypeDefault

checkedboolean—

defaultCheckedbooleanfalse

onCheckedChange(checked: boolean) => void—

size"sm" | "default""default"

disabledbooleanfalse

When to use the switch

Use switches for settings that take effect immediately. It is the shadcn Switch with a spring-driven thumb.

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

DialogModal dialogs that morph open, with confirm-then-close actions.
TabsTabs with a sliding indicator and crossfading panels.
Yes, built on Radix.
Height springs open.
AccordionExpandable sections with smooth height animation.

Switch

Install

Props

When to use the switch

Suggested components

Is it accessible?

Is it animated?