Installation
Run the following command:
Update your imports:import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
Usage
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle
} from "@/components/ui/card";
export default function Home() {
return (
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>Main content goes here</CardContent>
<CardFooter>Footer content goes here</CardFooter>
</Card>
);
}
Props
Card
Prop | Type | Default | Description |
---|---|---|---|
variant | default | ghost | outline | default | Style variant of the card |
HTML Attributes
All Card components support standard HTML attributes:
Card, CardHeader, CardContent, CardFooter
Standard HTML div attributes:
id
onClick
role
aria-*
attributesdata-*
attributes- Event handlers like
onMouseEnter
, etc.
CardTitle
Standard HTML h3 attributes.
CardDescription
Standard HTML paragraph attributes.
The Card components ensure proper semantic structure through appropriate HTML elements.