Card

Displays content in a structured container with an optional header, content, and footer.

Last updated January 1, 1980

CreditsUnchangedPublished

Copied from shadcn/ui.

Overview

Installation

Usage

import {
 
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
export function Example() {
  return (
    <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>
  )
}

Examples

Size

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

Image

Add an image before the card header to create a card with an image.

RTL

Product card

A Persian e-commerce pattern: Toman pricing with a discount badge and a right-to-left price line.

API Reference

Card

API reference: shadcn/ui Card .