Blog Card
Post cards for blog indexes, tag, title, excerpt, and meta.
Design systems
Why copy-paste beats another npm UI kit
Owning the source means you can theme, fork, and ship.
Ava Ruiz
Sep 12, 2026
Installation
npx paubha@latest add blog-cardUsage
import { BlogCard, BlogCardGrid } from "@/components/ui/blog-card";
import { Badge } from "@/components/ui/badge";
import { Avatar } from "@/components/ui/avatar";
<BlogCardGrid>
<BlogCard
tag={<Badge variant="gray" fill="subtle" size="sm">Design</Badge>}
title="Why copy-paste wins"
excerpt="Own the source, no black-box npm package."
meta={
<div className="flex items-center gap-2">
<Avatar initials="AR" alt="Ava Ruiz" size="sm" />
<span className="text-ui-sm">Ava Ruiz</span>
</div>
}
/>
</BlogCardGrid>