Card

Displays a card with header, content, and footer.

Create project

Deploy your new project in one click.

Frame content with hairline borders.

Installation

Add the card component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/card.json

Usage

tsx

import { Card } from "@/components/ui/card"

Examples

With action

CardHeader + CardAction

Notifications

You have 3 unread messages.

Card actions sit in the top-right of the header.

import { SettingsIcon } from "lucide-react"

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

<Card className="w-72">
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
    <CardAction>
      <Button variant="ghost" size="icon-sm" aria-label="Settings">
        <SettingsIcon />
      </Button>
    </CardAction>
  </CardHeader>
  <CardContent>Card actions sit in the top-right of the header.</CardContent>
</Card>

Content only

No header or footer

A card can be just a bordered content surface.

import { Card, CardContent } from "@/components/ui/card"

<Card className="w-72">
  <CardContent>
    A card can be just a bordered content surface.
  </CardContent>
</Card>