Components
Loading preview...
A smooth animated toggle switch built with Framer Motion. The thumb morphs and slides with a liquid animation effect.
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/framer-motion-switch"use client";
import React, { useState } from "react";
import { Switch } from "../components/ui/framer-motion-switch";
export default function FramerMotionSwitchDemo() {
const [checked, setChecked] = useState(false);
return (
<div className="flex flex-col items-center justify-center w-full min-h-screen bg-black gap-8 p-8">
<Switch checked={checked} setChecked={setChecked} />
<Switch checked={!checked} setChecked={(v) => setChecked(!v)} />
</div>
);
}