Card

Displays a card with header, content, and footer.

Radix UI Base UI

Enter your email below to login to your account

Calendar Carousel

On This Page

Installation Usage Examples Size Image API Reference Card CardHeader CardTitle CardDescription CardAction CardContent CardFooter

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add card

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>

Use the size="sm" prop to set the size of the card to small. The small size variant uses smaller spacing.

Scheduled reports

Weekly snapshots. No more manual exports.

Choose a schedule (daily, or weekly).
Send to channels or specific teammates.
Include charts, tables, and key metrics.

The Card component is the root container for card content.

Prop	Type	Default
`size`	`"default" \| "sm"`	`"default"`
`className`	`string`	-

The CardHeader component is used for a title, description, and optional action.

Prop	Type	Default
`className`	`string`	-

The CardTitle component is used for the card title.

Prop	Type	Default
`className`	`string`	-

The CardDescription component is used for helper text under the title.

Prop	Type	Default
`className`	`string`	-

The CardAction component places content in the top-right of the header (for example, a button or a badge).

Prop	Type	Default
`className`	`string`	-

The CardContent component is used for the main card body.

Prop	Type	Default
`className`	`string`	-

The CardFooter component is used for actions and secondary content at the bottom of the card.

Prop	Type	Default
`className`	`string`	-

import { Button } from "@/components/ui/button"
import {
  Card,

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {

import { Button } from "@/components/ui/button"
import {
  Card,