Badge Card
A card component with a gradient accent bar, header with icon/title/count, and a flex-wrap grid of badges. Uses solid gradient styling for the accent bar.
Installation
$ npx shadcn@latest add @orecus/badge-cardRegistry:
@orecus/stat-badge@orecus/color-utils@orecus/card
Component
Basic Examples
Badge cards with different categories and colors
🎨
4Frontend
ReactTypeScriptNext.jsTailwind CSS
⚙️
4Backend
Node.jsPythonPostgreSQLRedis
🚀
4DevOps
DockerAWSCI/CDTerraform
🛠️
3Tools
GitVS CodeFigma
With Icon
✨
4Design
UI/UXFigmaPrototypingUser Research
📢
4Marketing
SEOContentAnalyticsCampaigns
Without Icon
Languages
JavaScriptTypeScriptPythonRust
Frameworks
ReactVueAngularSvelte
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Title/name displayed in the header |
icon | ReactNode | — | Icon or emoji displayed before the title |
badges* | string[] | — | Array of badge labels to display |
color | ThemeColor | 'primary' | Theme color for the accent bar gradient (primary, secondary, green, amber, etc.) |
animationDelay | number | 0 | Animation delay for staggered entrance animations |
className | string | — | Additional CSS classes for the card |
badgeClassName | string | — | Additional CSS classes for badge items |
badgeProps | Omit<StatBadgeProps, 'value' | 'className'> | — | Props to pass to each StatBadge component (e.g., variant, size, type, accentBar) |
cardProps | Omit<CardProps, 'children' | 'className'> | — | Additional props to pass to the underlying Card component (e.g., animationPreset, hoverEffect, etc.) |