Components
Loading preview...
A control allowing the user to toggle between checked and not checked.
npx shadcn@latest add https://21st.dev/r/coss.com/checkboximport { Checkbox } from "@/components/ui/component";
export default function Particle() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<label className="flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50 cursor-pointer">
<Checkbox defaultChecked />
<div className="flex flex-col gap-1">
<p className="text-sm font-medium">Enable notifications</p>
<p className="text-muted-foreground text-xs">
You can enable or disable notifications at any time.
</p>
</div>
</label>
</div>
);
}