Card with header and footer
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A titled header and a footer button, each split from the body by a rule, with no description line
When to use
- Titled sections with body copy and footer actions, such as a help notice or a sign in form
- Image tiles with a photo above the copy or filling the tile under a dark text overlay
- Dashboard widgets such as a KPI with a trend, a usage meter or a deployment or integration status
When not to use
- Compact sections with no outer padding and a button inside the header: use the Card Border Separation example
- A finished grid of KPI tiles, feature links or profile records ready to drop in: use the Card blocks
- A KPI panel with a range filter, a segmented meter or an activity feed beneath it: use the Stats blocks
- A preview that pops up over a link while the pointer rests on it: use the Hover Card component
Agent notes
- Each example caps
Cardwithmax-w-xs,max-w-smormax-w-md; drop the cap when the card should fill a grid cell or column sizesm onCardtightens padding and gaps in every style; none of these examples sets it, so try it before padding overrides
https://reui.io/components/card/c-card-4.mdget_example("c-card-4")npx shadcn@latest add @reui/c-card-4About Shadcn Card Header & Footer
Card with header and footer. Built by composing Button, Card. A free, open source shadcn card example you can install with npx shadcn@latest add @reui/c-card-4 and edit as your own code.
What You Can Build With Shadcn Card Header & Footer
- Composes Button, Card, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-card-4
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Card Examples
- Basic Basic card
- Bordered Header Card header with border
- Border Separation Card with border separation
- Link Action Card with link
- Dropdown Menu Card with dropdown menu
- Inset Image Card with image
- Image Hover Zoom Card with image scale hover effect
- Full Image Card with full image
- Image Shadow Fade Full card with image and shadow fade effect
- Stacked Depth Card with stacked depth effect
- Login Form Advanced clean login form card
- Billing Usage Expandable billing usage card
Related Shadcn Component Categories
Open-source shadcn carousel components for image galleries, feature showcases, and testimonials.
Nested multi-level selection with drill-down navigation, breadcrumbs, search and custom rows.
Open-source shadcn chart components for analytics dashboards, KPI tracking, and reports.
Open-source shadcn checkbox components for multi-select forms, settings preferences, and table selection.
Open-source shadcn code block components with Shiki syntax highlighting for AI chat, streaming agent output, diff review, and documentation.
Open-source shadcn collapsible components for expandable sections, detail rows, and progressive disclosure.
Frequently Asked Questions
When should I use Shadcn Card Header & Footer?
Use it for a titled header and a footer button, each split from the body by a rule, with no description line.
Shadcn Card as a whole fits:
- Titled sections with body copy and footer actions, such as a help notice or a sign in form
- Image tiles with a photo above the copy or filling the tile under a dark text overlay
- Dashboard widgets such as a KPI with a trend, a usage meter or a deployment or integration status
For compact sections with no outer padding and a button inside the header, use the Card Border Separation example. For a finished grid of KPI tiles, feature links or profile records ready to drop in, use the Card blocks. For a KPI panel with a range filter, a segmented meter or an activity feed beneath it, use the Stats blocks. For a preview that pops up over a link while the pointer rests on it, use the Hover Card component.
How do I install Shadcn Card Header & Footer?
Is Shadcn Card Header & Footer free to use?
Which components does Shadcn Card Header & Footer use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.