Components
Loading preview...
Here is Switch component
npx shadcn@latest add https://21st.dev/r/anubra266/switch-1"use client";
import { Switch } from "@ark-ui/react/switch";
export default function SwitchBordered() {
return (
<div className="bg-white dark:bg-gray-800 w-full px-4 py-12 rounded-xl flex items-center justify-center">
<Switch.Root className="flex items-center gap-3">
<Switch.Control className="relative inline-flex w-11 p-1 items-center rounded-full border-2 border-gray-300 bg-transparent transition-colors duration-200 ease-in-out data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 data-focus-visible:ring-2 data-focus-visible:ring-gray-300/50 data-[state=checked]:data-focus-visible:ring-blue-500/50 dark:border-gray-600 dark:data-[state=checked]:bg-blue-500 dark:data-[state=checked]:border-blue-500">
<Switch.Thumb className="w-4 h-4 rounded-full bg-gray-300 shadow-sm transition-all duration-200 ease-in-out data-[state=checked]:translate-x-full data-[state=checked]:bg-white dark:bg-gray-600 dark:data-[state=checked]:bg-white" />
</Switch.Control>
<Switch.HiddenInput />
</Switch.Root>
</div>
);
}