Command Palette

Search for a command to run...

Docs
Card

Card

Containers for displaying related content and actions in a single unit.

Card Title

Card Description

Card Content

Installation

Run the following command:

Update your imports:
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"

Usage

import { 
  Card, 
  CardContent, 
  CardDescription, 
  CardFooter, 
  CardHeader, 
  CardTitle 
} from "@/components/ui/card";
 
export default function Home() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>Main content goes here</CardContent>
      <CardFooter>Footer content goes here</CardFooter>
    </Card>
  );
}

Props

Card

PropTypeDefaultDescription
variantdefault | ghost | outlinedefaultStyle variant of the card

HTML Attributes

All Card components support standard HTML attributes:

Card, CardHeader, CardContent, CardFooter

Standard HTML div attributes:
  • id
  • onClick
  • role
  • aria-* attributes
  • data-* attributes
  • Event handlers like onMouseEnter, etc.

CardTitle

Standard HTML h3 attributes.

CardDescription

Standard HTML paragraph attributes.
The Card components ensure proper semantic structure through appropriate HTML elements.