Switch
Switch component
Example
import { Switch, SwitchTrack } from "../ui/primitives/switch";
export function SwitchExample() {
return (
<div className="flex gap-2 items-center">
<label
htmlFor="switchEx"
className="select-none font-medium"
>
Dark mode
</label>
<Switch
className="p-1 bg-white/30 backdrop-blur-sm w-[40px] rounded-full data-[checked=true]:bg-violet-500 transition-colors"
id="switchEx"
>
<SwitchThumb
className="bg-white size-[17px] block rounded-full"
onCheckAnimation={{
translateX: 15,
}}
onUncheckAnimation={{
translateX: 0,
}}
/>
</Switch>
</div>
);
}