Card

Cards for content, metrics, and actions—with subtle motion.

Installation

npx shadcn@latest add @iconiq/card

Props

Card

Compound card surface with slot-based sections, optional interactive lift, and layout-aware motion between content states.

childrenReactNode

Required

Compose CardHeader, CardContent, CardFooter, media, or custom blocks inside the shared card shell.

interactiveboolean

Default false

Enables the restrained hover lift and stronger surface response intended for clickable or focusable cards.

classNamestring

Merged onto the root card surface for local spacing, border, or layout adjustments without replacing the slot API.

onHoverStart() => void

Called when interactive hover feedback begins from pointer, focus, or keyboard focus within the card.

onHoverEnd() => void

Called when interactive hover feedback ends after pointer leave and focus exits the card.

The root forwards standard div props, so you can attach ids, aria attributes, data attributes, and event handlers directly.

Cards with a direct leading image automatically remove top padding and inherit the root radius on the first and last image edges.

Footer-aware padding is handled by the card itself, so adding CardFooter trims the bottom padding without extra wrapper logic.

CardHeader

Top header grid for title, description, and an optional trailing CardAction.

childrenReactNode

Required

Compose CardTitle, CardDescription, and optional CardAction inside the header grid.

classNamestring

Merged onto the header grid wrapper.

The header uses a compact grid so status pills and actions align naturally without extra wrappers.

CardTitle

Primary heading slot with default title typography.

childrenReactNode

Required

Heading content for the card. Works with links, badges, metrics, or richer inline content.

classNamestring

Merged with the default title typography classes.

CardDescription

Secondary supporting copy beneath the title.

childrenReactNode

Required

Supporting description or excerpt text rendered with muted body styling.

classNamestring

Merged with the muted description typography classes.

CardAction

Optional trailing action slot aligned to the top-right of CardHeader.

childrenReactNode

Required

Action content such as a menu trigger, status pill, or compact control.

classNamestring

Merged with the default action placement classes.

CardContent

Flexible middle section for body copy, media, stats, and custom layouts.

childrenReactNode

Required

Main card body content rendered inside the padded content slot.

classNamestring

Merged with the default horizontal padding classes.

CardFooter

Bottom section for supporting actions, metadata, or contextual labels.

childrenReactNode

Required

Footer content rendered on a quieter separated surface beneath the body.

classNamestring

Merged with the default footer surface and spacing classes.

Adding CardFooter trims the root card bottom padding automatically.

Motion and interaction model

Layout changes are animated through Motion so expanding or swapping card content feels fluid rather than abrupt.

When interactive is enabled, hover drives a spring-smoothed motion value so lift, scale, and shadow ease in and out as one fluid surface; compound slots only animate layout when content changes.

interactive only changes the visible surface response: border, shadow, and a very small hover lift. The component does not add button semantics on its own.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.

This page lives in the Components section, but the install itself is the shared Iconiq card primitive rather than a Radix UI or Base UI wrapper.

The provider switch is shown for section consistency, but both Radix UI and Base UI options are disabled because Card does not ship primitive-specific variants here.

The generated registry file is /r/card.json.