quill
blockbadge-on-cardsource: ok · hit
Badges on card
Default, secondary, and destructive badges shown together on a card surface.
npx shadcn add "https://www.quilldesignsystem.com/r/badge-on-card.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightRegistry dependencies
cardbadge
Files1 · source cached 10/9/2026, 9:28:22 PM
registry/blocks/badge-on-card.tsx
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
/** Default, secondary, and destructive badges shown together on a card surface. */
export function BadgeOnCard() {
return (
<Card className="w-[280px]">
<CardContent className="flex gap-2 pt-6">
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
</CardContent>
</Card>
)
}