Components
Loading preview...
Here is Toggle Switch component
@prebuiltui
npx shadcn@latest add https://21st.dev/r/prebuiltui/toggle-switchexport default function Example() {
return (
<div className="flex flex-wrap items-center justify-center gap-12">
<label className="relative inline-flex items-center cursor-pointer text-gray-900 gap-3">
<input type="checkbox" className="sr-only peer" />
<div className="w-12 h-7 bg-slate-300 rounded-full peer peer-checked:bg-indigo-600 transition-colors duration-200"></div>
<span className="dot absolute left-1 top-1 w-5 h-5 bg-white rounded-full transition-transform duration-200 ease-in-out peer-checked:translate-x-5"></span>
Enable Feature
</label>
<label className="relative inline-flex items-center cursor-pointer text-gray-900 gap-3">
<input type="checkbox" className="sr-only peer" checked />
<div className="w-12 h-7 bg-slate-300 rounded-full peer peer-checked:bg-indigo-600 transition-colors duration-200"></div>
<span className="dot absolute left-1 top-1 w-5 h-5 bg-white rounded-full transition-transform duration-200 ease-in-out peer-checked:translate-x-5"></span>
Feature Enabled
</label>
</div>
);
};