Card

The Card component is a foundational layout surface used to group related content: dashboards, pricing blocks, settings panels, and list items.

It’s built with semantic tokens (bg-card, border-border, text-card-foreground) so it stays consistent across themes.

Import

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

Usage

Account

Manage your profile settings.

Update personal details, security preferences, and integrations.

<Card>
  <CardHeader>
    <CardTitle>Account</CardTitle>
    <CardDescription>Manage your profile settings.</CardDescription>
  </CardHeader>
  <CardContent>...</CardContent>
  <CardFooter>...</CardFooter>
</Card>

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

export default function Demo() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Account</CardTitle>
        <CardDescription>Manage your profile settings.</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="text-sm text-muted-foreground">
          Update personal details, security preferences, and integrations.
        </div>
      </CardContent>
      <CardFooter className="justify-end">
        <Button variant="secondary">Cancel</Button>
        <Button className="ml-2">Save</Button>
      </CardFooter>
    </Card>
  );
}

Variants

Cards support small semantic variants for different surfaces.

Default

Standard surface.

Muted

Subtle background.

Transparent

No background.

<Card />
<Card variant="muted" />
<Card variant="transparent" />

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

export default function CardVariantsExample() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      <Card>
        <CardHeader>
          <CardTitle>Default</CardTitle>
          <CardDescription>Standard surface.</CardDescription>
        </CardHeader>
      </Card>

      <Card variant="muted">
        <CardHeader>
          <CardTitle>Muted</CardTitle>
          <CardDescription>Subtle background.</CardDescription>
        </CardHeader>
      </Card>

      <Card variant="transparent">
        <CardHeader>
          <CardTitle>Transparent</CardTitle>
          <CardDescription>No background.</CardDescription>
        </CardHeader>
      </Card>
    </div>
  );
}

Available variants

Variant	Description
default	Main surface (`bg-card`)
muted	Softer surface (`bg-muted/40`)
transparent	No background

Interactive cards

Use interactive for hover feedback on list items and grids.

Clickable card

Hover to see the accent surface.

<Card interactive className="cursor-pointer">...</Card>

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

export default function InteractiveCardExample() {
  return (
    <Card interactive className="max-w-sm cursor-pointer">
      <CardHeader>
        <CardTitle>Clickable card</CardTitle>
        <CardDescription>Hover to see the accent surface.</CardDescription>
      </CardHeader>
    </Card>
  );
}

As child (Slot)

Render the Card as another element (for example, a link) while keeping styles.

Read the docs

Go to documentation →

<Card asChild interactive>
  <a href="/docs">...</a>
</Card>

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

export default function CardAsChildExample() {
  return (
    <Card asChild interactive className="max-w-sm">
      <a href="/docs" className="block">
        <CardHeader>
          <CardTitle>Read the docs</CardTitle>
          <CardDescription>Go to documentation →</CardDescription>
        </CardHeader>
      </a>
    </Card>
  );
}

API

Props

Prop	Type	Default	Description
variant	CardVariant	"default"	Visual surface style
interactive	boolean	false	Adds hover feedback
asChild	boolean	false	Render via Radix Slot
className	string	—	Additional Tailwind classes

The Card components extend standard HTML props:

React.HTMLAttributes<HTMLDivElement>

TypeScript types

These types define the public API of the Card component.

export type CardVariant = "default" | "muted" | "transparent";

Accessibility

Prefer semantic structure: CardHeader → title/description → CardContent → CardFooter.
If the Card is clickable, render it as a link or button via asChild.
Avoid nesting interactive elements inside an interactive Card.
Keep only one interactive target per Card.