Components
Loading preview...
An animated checkbox component with smooth transitions and hover effects built on Radix UI primitives.
@molecule-ui
npx shadcn@latest add https://21st.dev/r/molecule-lab-rushil/animate-checkbox
import { Checkbox } from "@/components/ui/animate-checkbox";
export default function DemoOne() {
return <div className="flex flex-col gap-6">
<div className="flex items-center gap-2">
<Checkbox />
<div><a className='underline pointer-cursor' target="_blank" href="https://moleculeui.design" variant='link'>Checkout Molecule UI</a></div>
</div>
<div className="flex items-center gap-2">
<Checkbox defaultChecked />
<div><a className='underline pointer-cursor' target="_blank" href="https://moleculeui.design" variant='link'>Checkout Molecule UI</a></div>
</div>
<div className="flex items-center gap-2">
<Checkbox
defaultChecked
className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white "
/>
<div>Enable Notification</div>
</div>
</div>;
}