Card

Displays a card with header, content, and footer.

Installation

Preview

Usage

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

Displays a card with header, content, and footer.

Examples

Basic

Preview

Code

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

Usage notes

Use full composition: CardHeader, CardTitle, CardDescription, CardContent, CardFooter.

Avoid

• Do not dump all content into CardContent without header