Components
Loading preview...
Here is Checkbox Card component
@SubframeApp
npx shadcn@latest add https://21st.dev/r/SubframeApp/checkbox-cardimport 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://images.unsplash.com/photo-1515378791036-0648a3ef77b2?q=80&w=160&auto=format&fit=crop"
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://images.unsplash.com/photo-1515378791036-0648a3ef77b2?q=80&w=160&auto=format&fit=crop"
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>
);
}