Components/Card

Card

Displays a card with header, content, and footer.

Notifications

You have 3 unread messages.

Installation

npx ajaxui add card

Usage

import { Card } from "@/components/ui/card"

export default function App() {
  return (
    <Card className="p-6">
      Card content
    </Card>
  )
}

Anatomy

<Card>                       // styled container
  <CardHeader>
    <CardTitle/>
    <CardDescription/>
  </CardHeader>
  <CardBody/>                // main content
  <CardFooter/>              // action row
</Card>