About
Here is Checkbox Card component
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Checkbox Card to your project and fits it to your theme.
Code
How Checkbox Card is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Component from "@/components/ui/checkbox-card";
export default function CheckboxCardWithMedia() {
return (
<div className="max-w-lg space-y-3 rounded-lg p-4 ring-1 bg-white text-gray-900 ring-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:ring-gray-700">
<Component>
<div className="flex min-w-0 items-center gap-3">
<img
alt=""
src="https://cdn.21st.dev/assets/mirror/27/27159db84befb7bc566f0665b2c7ad6cebf788b4fc9f5fb2b24cde948f2ef9bb.jpg"
className="h-10 w-10 flex-none rounded-md object-cover"
/>
<div className="min-w-0">
<div className="truncate text-sm font-semibold">
Marketing newsletter
</div>
<div className="truncate text-xs text-zinc-600 dark:text-zinc-400">
Tips, insights and case studies curated weekly.
</div>
</div>
</div>
</Component>
<Component disabled defaultChecked>
<div className="flex min-w-0 items-center gap-3">
<img
alt=""
src="https://cdn.21st.dev/assets/mirror/27/27159db84befb7bc566f0665b2c7ad6cebf788b4fc9f5fb2b24cde948f2ef9bb.jpg"
className="h-10 w-10 flex-none rounded-md object-cover"
/>
<div className="min-w-0">
<div className="truncate text-sm font-semibold">
Early access program
</div>
<div className="truncate text-xs text-zinc-600 dark:text-zinc-400">
You’re already enrolled.
</div>
</div>
</div>
</Component>
</div>
);
}
Dependencies
More by SubframeApp
View all
Area Chart
108
Checkbox
16
Breadcrumb
12
Calendar
6
Context Menu
4
Checkbox Group
3
Accordion
3
Avatar
2
More in Cards
View all
Statistics Card 2
264
Course Design Cards
1.1K
Card
70
Stats cards with links
39
The Item one
3
Card Studio
7
Statistics Card 7
292
Item
10
