Card

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

Installation

npx shadcn@latest add @iconiq/card

File Structure

Usage

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export function CardUsage() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Release checklist</CardTitle>
        <CardDescription>
          Track the final items before shipping the next docs refresh.
        </CardDescription>
        <CardAction>
          <span className="rounded-md bg-muted px-2 py-0.5 text-[11px] font-medium">
            In review
          </span>
        </CardAction>
      </CardHeader>
      <CardContent className="space-y-2 text-sm">
        <p>Accessibility pass on interactive cards.</p>
        <p>Registry docs for media slots.</p>
      </CardContent>
    </Card>
  );
}

Props

Description

Card

children

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

Type ReactNode

interactive

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

Type boolean·Default false

asChild

Merges the card surface classes and interaction handlers onto the single child element, which is useful for link or button cards.

Type boolean·Default false

className

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

Type string

onHoverStart

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

Type () => void

onHoverEnd

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

Type () => void

CardHeader

children

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

Type ReactNode

className

Merged onto the header grid wrapper.

Type string

CardTitle

children

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

Type ReactNode

className

Merged with the default title typography classes.

Type string

as

Semantic heading element used for the title. Defaults to h3 for accessible card headings.

Type "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span"·Default "h3"

CardDescription

children

Supporting description or excerpt text rendered with muted body styling.

Type ReactNode

className

Merged with the muted description typography classes.

Type string

as

Semantic text element used for the description. Defaults to p for accessible supporting copy.

Type "p" | "div" | "span"·Default "p"

CardAction

children

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

Type ReactNode

className

Merged with the default action placement classes.

Type string

CardContent

children

Main card body content rendered inside the padded content slot.

Type ReactNode

className

Merged with the default horizontal padding classes.

Type string

CardFooter

children

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

Type ReactNode

className

Merged with the default footer surface and spacing classes.

Type string

CardImage

alt

Accessible alternative text for the image.

Type string

src

Image source passed through to next/image.

Type string

inset

When true, wraps the image in the padded card media frame. Set false for edge-to-edge media.

Type boolean·Default true

fill

Uses fill layout when true. Defaults to fill when width and height are both omitted.

Type boolean

sizes

Responsive sizes hint forwarded to next/image for better loading performance.

Type string·Default "(max-width: 768px) 100vw, 400px"

className

Merged onto the rendered image element.

Type string

CardMedia

children

Non-image media content such as video, a chart container, or an embed.

Type ReactNode

inset

When true, wraps children in the padded card media frame. Set false for edge-to-edge media.

Type boolean·Default true

className

Merged onto the outer media wrapper.

Type string

Clickable card recipes

Patterns for whole-card navigation and cards that contain separate interactive controls.

Whole-card link: <Card asChild interactive><a href="/post">...</a></Card>.

Whole-card button: <Card asChild interactive><button type="button">...</button></Card>.

Card with its own CTA: keep Card unwrapped and place buttons or links inside CardContent or CardFooter.

Do not wrap a card that already contains buttons or links in another anchor or button via asChild.

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.

prefers-reduced-motion disables spring hover and layout transitions. Interactive cards still get border and surface feedback through CSS.

asChild cards use CSS-based hover lift instead of spring transforms so the merged anchor or button remains the interactive root. Lift is also skipped when prefers-reduced-motion is enabled.

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, @radix-ui/react-slot.

CardImage requires a Next.js project because it always renders next/image.

Use CardMedia only for non-image media such as video, charts, or embeds.

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.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Design Systems That Last

Steady patterns keep interfaces coherent as products grow.