Features

• Composable sub-components (Header, Title, Description, Content, Footer)
• Consistent spacing and styling
• Dark mode support
• Flexible layout options

Usage

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

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here</p>
      </CardContent>
      <CardFooter>
        <p>Card footer</p>
      </CardFooter>
    </Card>
  );
}
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here</p>
      </CardContent>
      <CardFooter>
        <p>Card footer</p>
      </CardFooter>
    </Card>
  );
}

Anatomy

The Card component is composed of several sub-components:

• Card: The container component
• CardHeader: Header section for titles and descriptions
• CardTitle: The card's main title
• CardDescription: Supporting text below the title
• CardContent: Main content area
• CardFooter: Footer section for actions or metadata

Examples

Simple Card

<Card>
  <CardHeader>
    <CardTitle>Simple Card</CardTitle>
  </CardHeader>
  <CardContent>
    <p>This is a simple card with minimal content.</p>
  </CardContent>
</Card>
<Card>
  <CardHeader>
    <CardTitle>Simple Card</CardTitle>
  </CardHeader>
  <CardContent>
    <p>This is a simple card with minimal content.</p>
  </CardContent>
</Card>

Card with Footer

<Card>
  <CardHeader>
    <CardTitle>Project Status</CardTitle>
    <CardDescription>Track your project progress</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="space-y-2">
      <p>Tasks completed: 12/20</p>
      <p>Deadline: Dec 31, 2025</p>
    </div>
  </CardContent>
  <CardFooter>
    <Button>View Details</Button>
  </CardFooter>
</Card>
<Card>
  <CardHeader>
    <CardTitle>Project Status</CardTitle>
    <CardDescription>Track your project progress</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="space-y-2">
      <p>Tasks completed: 12/20</p>
      <p>Deadline: Dec 31, 2025</p>
    </div>
  </CardContent>
  <CardFooter>
    <Button>View Details</Button>
  </CardFooter>
</Card>

Styling

Cards automatically adapt to light and dark themes using CSS variables. You can customize the appearance by applying additional classes to the Card component or its children.