Animated Switch
A precise switch, engineered with motion physics. Beauty in every pixel. Seamless by default. Use the live controls below to explore controlled/uncontrolled modes, stress tests, and why extra className that alters sizing will break the switch's internal geometry.
Controlled & uncontrolled modes
Supports both controlled and uncontrolled state management approaches.
Real-time onValueChange callbacks
Emits value updates instantly through callback events.
Custom onIcon & offIcon
Allows custom icons for both active and inactive states.
Motion layout + spring (stiffness: 500, damping: 35)
Smooth physical motion powered by a configurable spring animation.
Smooth precise translation from left: 4px to left: 44px
Provides a precise and fluid knob translation across the track.
$npx libravelui@latest add animated-switchimport { AnimatedSwitch } from "@/components/ui/motion/animated-switch";<AnimatedSwitch />Offset handle Clipping Unnatural motion
The handle expects exact container geometry (4px → 44px). Changing width/height/padding displaces it.
Loading types…