Card
Displays a card with header, content, and footer.
Card Title
Card Description
Card Content
Card Footer
Installation
npx shadcn@latest add https://exawizards.com/exabase/design/registry/card.jsonUsage
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
<CardFooter>
<p>Card Footer</p>
</CardFooter>
</Card>API
Props of each element are available.
| Component | Element |
|---|---|
Card | div |
CardHeader | div |
CardTitle | p |
CardDescription | p |
CardContent | div |
CardFooter | div |