Skip to main content

Cards

Versatile containers for grouping and organizing content.

Overview​

The Card component is a fundamental building block for dashboard layouts. It provides a clean, bordered container with optional headers, footers, and content areas.

Usage​

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

export function MyCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card Content goes here.</p>
      </CardContent>
      <CardFooter>
        <p>Card Footer</p>
      </CardFooter>
    </Card>
  );
}

Components​

  • Card: The main container.
  • CardHeader: A container for the title and description.
  • CardTitle: The primary heading of the card.
  • CardDescription: A secondary heading or description.
  • CardContent: The main body of the card.
  • CardFooter: A container for actions or additional information at the bottom.

Customization​

Cards can be easily customized using Tailwind CSS classes. For example, you can change the background color, add padding, or remove the border.

Best Practices​

  • ✅ Do this: Use cards to group related information together.
  • ✅ Do this: Keep card titles concise and descriptive.
  • ❌ Don't do this: Overload a single card with too much information; use multiple cards or a different layout if needed.