Card

A composable card component for displaying grouped content within a distinct, bordered container. Supports an optional size variant for compact layouts, and automatically adjusts when images are placed as direct children.

Create project

Deploy your new project in one click.

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function CardDemo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one click.</CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <div className="flex flex-col gap-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="name">Name</Label>
              <Input id="name" placeholder="Name of your project" />
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}

Anatomy

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

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

Examples

Basic card

<Card>
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your notifications will appear here.</p>
  </CardContent>
</Card>

With action

Use CardAction to place a button or badge in the top-right corner of the header.

<Card>
  <CardHeader>
    <CardTitle>Team Members</CardTitle>
    <CardDescription>Manage your team and their roles.</CardDescription>
    <CardAction>
      <Button variant="outline" size="sm">
        Invite
      </Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p>No members yet.</p>
  </CardContent>
</Card>

With footer

<Card>
  <CardHeader>
    <CardTitle>Create Project</CardTitle>
    <CardDescription>Deploy a new project in one click.</CardDescription>
  </CardHeader>
  <CardContent>
    <form>
      <Input placeholder="Project name" />
    </form>
  </CardContent>
  <CardFooter>
    <Button>Create</Button>
  </CardFooter>
</Card>

With image

When an <img> is the first child of the card, the top padding is automatically removed and the image fills to the card's rounded corners.

<Card>
  <img src="/images/placeholder.jpg" alt="Cover" />
  <CardHeader>
    <CardTitle>Blog Post</CardTitle>
    <CardDescription>A short description of the post.</CardDescription>
  </CardHeader>
</Card>

Small size

Use size="sm" for a more compact card with tighter spacing.

<Card size="sm">
  <CardHeader>
    <CardTitle>Compact Card</CardTitle>
    <CardDescription>Less padding and smaller gaps.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content area.</p>
  </CardContent>
</Card>

With bordered sections

Add a border-b class to the header or a border-t class to the footer for visual separation between sections.

<Card>
  <CardHeader className="border-b">
    <CardTitle>Settings</CardTitle>
    <CardDescription>Manage your account settings.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Settings content here.</p>
  </CardContent>
  <CardFooter className="border-t">
    <Button>Save</Button>
  </CardFooter>
</Card>

API Reference

Card

The root container. Renders a rounded, bordered <div> with vertical flex layout.

Prop	Type	Default	Description
`size`	`"default" \| "sm"`	`"default"`	Controls spacing and padding. Use `"sm"` for compact layouts.
`className`	`string`	—
`children`	`ReactNode`	—

CardHeader

A grid layout container for the title, description, and optional action. Automatically switches to a two-column grid when CardAction is present.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

CardTitle

The card's heading. Font size adjusts automatically based on the card's size prop.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

CardDescription

Secondary text displayed below the title, styled in muted-foreground.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

CardAction

Positioned in the top-right of the header. Spans both rows (title and description) so it stays vertically centered.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

CardContent

The main body area of the card.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

CardFooter

A horizontal flex container at the bottom of the card for actions or secondary content.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—