Animated Toggle
A toggle switch component with smooth animations and multiple variants including morph and icon transitions.
Installation
pnpm dlx shadcn add @smoothui/animated-togglenpx shadcn@latest add @smoothui/animated-toggleyarn dlx shadcn add @smoothui/animated-togglebunx shadcn add @smoothui/animated-toggleFeatures
- Three variants: default (smooth sliding), morph (shape changes during travel), and icon (transitions between icons)
- Three sizes: sm, md, and lg
- Controlled and uncontrolled modes
- Smooth spring animations with Motion
- Icon variant supports custom icons with crossfade and scale transitions
- Morph variant animates borderRadius during travel
- Full keyboard accessibility (Space/Enter to toggle)
- Proper ARIA attributes with role="switch" and aria-checked
- Respects reduced motion preferences
- Disabled state support