Animated Switch

An interactive, iOS-style "squish" switch built on Base UI Switch primitives. Press feedback stretches the thumb toward its travel direction, then releases into a short spring transition.

Features

• Purposeful Press Feedback — The thumb subtly stretches on pointer-down and resets on release, cancellation, or lost capture.
• Responsive Motion — Uses Sona's shared feedback spring, so its timing stays consistent with other interactive components.
• Standard Sizes — Out-of-the-box support for sm, md, and lg sizes.
• Base UI Integration — Fully keyboard-navigable and accessible with standard button attributes.
• RSC Safe — Renders cleanly as a static element on the server and hydrates client-side animations.
• Reduced Motion — Uses an immediate state change when the user requests less motion.

Playground

Test sizes and interactions live.

Installation

npx shadcn@latest add @sona-ui/animated-switch

Usage

"use client";
 
import AnimatedSwitch from "@/components/ui/animated-switch/animated-switch";
 
export default function AnimatedSwitchDemo() {
  return <AnimatedSwitch defaultChecked />;
}

Examples

Sizes

Animated Switch supports three pre-configured sizes: sm, md, and lg.

Controlled State

Wire up the switch using the checked and onCheckedChange props to control it via external react state.

Disabled

Toggle the disabled prop to deactivate interaction while preserving styles.

Props