Shadcn Card

A card is a bordered box with a header, a body, and a footer. Title and description stack in the header; CardAction pins a button or badge on the end. Use one card per topic — a login, a setting, a product.

Usage

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

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

CardAction sits in the header end column. Every part is a div.

Composition

Size

There is no size prop. gap-3 py-3 on Card and px-3 on the parts is the compact look.

Spacing

Default is gap-6 py-6 and px-6 on the parts. Override those classes — this file does not read --card-spacing.

-mx-6 pulls a child to the edges. -mb-6 on CardContent closes the gap above the footer.

Image

Put the <img> before CardHeader. pt-0 overflow-hidden so it sits flush and clips the radius.

RTL

Wrap with DirectionProvider and dir="rtl". Use ms-auto, not ml-auto, so the end-aligned link stays on the end.

API

CardHeader, CardTitle, CardDescription, CardContent, and CardFooter take className. CardAction is the header end slot.

Notes

CardAction only lands in the header grid. Put it inside CardHeader.

With other components

Questions

Related