Card

A versatile card component for grouping related information, actions, and media.

The Card component organizes related content, actions, and media into a clean, elevated container.

Usage

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

export function ExampleCard() {
  return (
    <Card.Root>
      <Card.Header>
        <Card.Title>Notifications</Card.Title>
        <Card.Description>You have 3 unread messages.</Card.Description>
      </Card.Header>
      <Card.Content>
        <p className="text-sm">Message list goes here...</p>
      </Card.Content>
      <Card.Footer>
        <button>Mark all as read</button>
      </Card.Footer>
    </Card.Root>
  );
}

Preview

Your team subscription has been renewed successfully for another month.

Custom Styling

Apply custom gradient borders, glassmorphism, or hover shadows via inline className:

<Card.Root className="max-w-sm border-0 bg-gradient-to-br from-indigo-500/10 via-purple-500/5 to-background p-1 ring-1 ring-indigo-500/20 shadow-xl">
  <Card.Header>
    <Card.Title className="text-indigo-600 dark:text-indigo-400">Pro Feature</Card.Title>
    <Card.Description>Unlock advanced analytics and team controls.</Card.Description>
  </Card.Header>
  <Card.Content>
    <p className="text-sm font-semibold">$29 / month per seat</p>
  </Card.Content>
</Card.Root>

Gain full access to data export and team permissions.

Styling & Class Names

Target internal card CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.card`	Root card container	Elevated border, background, and rounded container.
`.card__header`	Card header	Header section with padding and flex column gap.
`.card__title`	Title text	Bold heading title styles.
`.card__description`	Description text	Muted description subtitle styles.
`.card__content`	Content section	Main card body content area.
`.card__footer`	Footer section	Bottom action bar with flex alignment.

API Reference

Card.Root Props

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional inline CSS utility classes.