Installation
Usage
import CheckboxCard from "@/components/ruixen/checkbox-card";
import { Zap } from "lucide-react";
export default function MyComponent() {
return (
<CheckboxCard
title="Performance"
description="Optimized for speed and efficiency"
icon={<Zap className="size-5" />}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | - | Controlled checked state |
defaultChecked | boolean | false | Default checked state |
onCheckedChange | (checked: boolean) => void | - | Callback when state changes |
title | string | - | Card title (required) |
description | string | - | Card description |
icon | React.ReactNode | - | Optional icon element |
disabled | boolean | false | Disable the checkbox |
className | string | - | Additional CSS classes |
Features
- Card-style selection UI
- Icon, title, and description support
- Active state with border highlight
- Round checkbox indicator
- Light and dark mode support