A fluid animated switch with draggable thumb, smooth pill morphing on hover/press, and accessible keyboard support.
"use client"; import { useState } from "react"; import { Switch } from "../components/ui/switch"; export default function SwitchCheckedDemo() { const [checked, setChecked] = useState(true); return ( <div className="flex items-center justify-center min-h-screen bg-background"> <div className="transform scale-150"> <Switch label="Enabled" checked={checked} onToggle={() => setChecked(!checked)} /> </div> </div> ); }
Part of Fluid Functionalism — browse the full library on 21st.dev.