Components

Card

A raised surface that groups related content and actions.

Deploy to production

Ship the current branch to your users.

The build finished 4 minutes ago and is waiting for approval.

Installation

npx shadcn@latest add @blank/card

Usage

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

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
    <CardAction>
      <Button variant="ghost" size="sm">
        Action
      </Button>
    </CardAction>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>

Examples

Sizes

size="sm" tightens padding and gaps together. The parts read the size from the card, so they never need it repeated.

Default

24px of padding and gap.

For a card that is the main object on the page.

Small

16px of padding and gap.

For cards that repeat in a grid or a list.

Lit edge

A hairline ring separates the card from the page. For the raised, lit look of a bento card, add a top-edge highlight; it reads as light in dark mode and disappears into white in light mode.

<Card className="shadow-[inset_0_1px_0_var(--highlight)]">…</Card>

With a form

Invite a teammate

They get access to every project.

API Reference

Card

Every div prop, plus:

Prop	Type	Default
`size`	`"default" \| "sm"`	`"default"`

CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter

divs with no props of their own. CardAction pins itself to the top-right of the header, beside the title and description.