Docs
card

card

Displays a card with header, content, and footer.

Create project

Deploy your new project in one-click.

Installation

npx duck-ui@latest add card
npx duck-ui@latest add card

Usage

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/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>
<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>

Notifications

You have 3 unread messages.

Push Notifications

Send notifications to device.

Your call has been confirmed.

1 hour ago

You have a new message!

1 hour ago

Your subscription is expiring soon!

2 hours ago

API Reference

Card

  • props (React.HTMLAttributes<HTMLDivElement>): All other standard <div> attributes.

Behavior:

  • Base container with rounded corners, border, background color (bg-card), and shadow (shadow-xs).
  • Uses forwardRef for ref forwarding.

CardHeader

  • props (React.HTMLAttributes<HTMLDivElement>): All other standard <div> attributes.

Behavior:

  • Vertically stacked layout with spacing (space-y-1.5).
  • Padding (p-6) for consistent header spacing.

CardTitle

  • props (React.HTMLAttributes<HTMLHeadingElement>): All other heading attributes.

Behavior:

  • Semibold, large heading style (text-2xl, leading-none, tracking-tight).

CardDescription

  • props (React.HTMLAttributes<HTMLParagraphElement>): All other <p> attributes.

Behavior:

  • Muted text style (text-muted-foreground, text-sm).

CardContent

  • props (React.HTMLAttributes<HTMLDivElement>): All other standard <div> attributes.

Behavior:

  • Padding (p-6) with no top padding (pt-0) for a clean visual separation from the header.

CardFooter

  • props (React.HTMLAttributes<HTMLDivElement>): All other standard <div> attributes.

Behavior:

  • Horizontal layout (flex items-center).
  • Padding (p-6) with no top padding (pt-0) to visually connect to the content area.
CalendarCarousel