Card

A container for grouping related content, composed from a header, a content body, and a footer.

<Card>
  <CardHeader>
    <CardTitle>Monthly report</CardTitle>
    <CardDescription>Revenue and active users for June.</CardDescription>
    <CardAction className="text-sm text-muted-foreground">June 2026</CardAction>
  </CardHeader>
  <CardContent>Everything is trending up and to the right.</CardContent>
  <CardFooter className="text-sm text-muted-foreground">
    Updated 2 hours ago
  </CardFooter>
</Card>

The parts

Only the pieces you use need to appear. A CardHeader holds a CardTitle, an optional CardDescription, and a top-right CardAction; CardContent is the body and CardFooter the bottom bar. The smallest useful card is a title and a body:

<Card>
  <CardHeader>
    <CardTitle>Card title</CardTitle>
  </CardHeader>
  <CardContent>Body content.</CardContent>
</Card>

Installation

Card is a shadcn/ui component. Add it with the CLI, then register its parts once in src/app/mdx-components.tsx so the tags resolve in both .mdx and page.py pages:

bunx shadcn@latest add card

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

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // ...your other components
    Card,
    CardHeader,
    CardTitle,
    CardDescription,
    CardAction,
    CardContent,
    CardFooter,
    ...components,
  };
}