Email Card

shadcn/ui Card translated for React Email. Full Card API: Card (with optional typed accent bar), CardHeader, CardTitle, CardDescription, CardContent, CardFooter. Renders as email-safe nested tables.

core/email-card

Installation

1 · Add registry to components.json

2 · Install component

Examples

All variants

Default card, accent variants (primary, secondary, destructive), and full header/content/footer composition.

API Reference

Prop	Type	Default	Description
`Card`	`component`	—	Outer container. accent?: "primary" \| "secondary" \| "destructive" \| "accent" \| "muted" renders a 3px colour bar at the top.
`CardHeader`	`component`	—	Top section with px-6 pt-5 pb-1 padding.
`CardTitle`	`component`	—	Heading inside CardHeader. Defaults to h2. Pass as prop to override.
`CardDescription`	`component`	—	Muted subtitle below CardTitle.
`CardContent`	`component`	—	Main content area with px-6 py-5 padding.
`CardFooter`	`component`	—	Bottom section with border-t, px-6 pb-5 pt-2.
`cardVariants`	`cva`	—	cva helper for custom card-like containers that need the same visual language.