Card

The Card component provides a flexible container with bold borders and shadows. It includes subcomponents for header, title, description, content, and footer. Built from scratch using React and native HTML div elements. Completely independent.

Usage

Copy the Card component code into your project, then use it like this:

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

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>Content</CardContent>
</Card>

Make sure you also have the lib/utils.ts file with the cn helper function.

Example