ComponentServer-safe
Card
A composable content container with header, body and footer regions.
Installation
Preview
Project created
Your new workspace is ready.
Updated just now
Usage
tsx
import {
Card, CardContent, CardDescription,
CardFooter, CardHeader, CardTitle,
} from "@/components/ui/card"
export function CardDemo() {
return (
<Card>
<CardHeader>
<CardTitle>Project created</CardTitle>
<CardDescription>Your new workspace is ready.</CardDescription>
</CardHeader>
<CardContent>Start adding components.</CardContent>
<CardFooter>Updated just now</CardFooter>
</Card>
)
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
Card | React.ComponentProps<"div"> | — | The root content container. |
CardHeader | React.ComponentProps<"div"> | — | Groups title and description. |
CardContent | React.ComponentProps<"div"> | — | Primary card content. |
CardFooter | React.ComponentProps<"div"> | — | Actions or supporting metadata. |