Card
Surface container with optional header, content, and footer slots. Use for grouping related content, metrics, and form sections.
{ Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@pepulux/ui"Default — header + content + footer
Full card with title, description, body, and action footer.
Notification settings
Manage how you receive updates.
Choose which notifications you want to receive for activity in your account.
Content-only card
Skip CardHeader and CardFooter for minimal padded containers.
A plain card with no header or footer — useful for wrapping custom layout sections.
Stats / metric card
Common pattern for dashboard metric tiles.
Total revenue
$48,295
Active devotees
3,842
Card with header actions
Place additional controls inside CardHeader using flex layout.
Team members
Manage access and roles.
Olivia Rhye
Admin
Phoenix Baker
Editor
Lana Steiner
Viewer
3 of 10 seats used
Cards in a grid layout
Cards pair naturally with CSS Grid for dashboard panels and feature lists.
Payments
$12,400
This week
Donations
$5,200
This week
Sevas
284
This week
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes on the card root element |
| children* | ReactNode | — | Card content — compose with sub-components below |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| CardHeader | div | — | Top section with bottom border. Contains CardTitle and CardDescription. |
| CardTitle | h3 | — | Bold heading inside CardHeader |
| CardDescription | p | — | Subtle description text inside CardHeader |
| CardContent | div | — | Main padded content area (p-5) |
| CardFooter | div | — | Bottom section, flex row, no top padding — for action buttons |