Sections
import { Button } from "@/components/ui/button"
import {
Card,Installation
pnpm dlx shadcn@latest add card
Usage
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
<CardAction>Card Action</CardAction>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
<CardFooter>
<p>Card Footer</p>
</CardFooter>
</Card>Examples
Size
Use the size="sm" prop to set the size of the card to small. The small size variant uses smaller spacing.
import { Button } from "@/components/ui/button"
import {
Card,Image
Add an image before the card header to create a card with an image.
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {RTL
Use dir="rtl" to render the card right-to-left.
import { Button } from "@/components/ui/button"
import {
Card,API Reference
Card
The Card component is the root container for card content.
| Prop | Type | Default |
|---|---|---|
size | "default" | "sm" | "default" |
className | string | - |
CardHeader
The CardHeader component is used for a title, description, and optional action.
| Prop | Type | Default |
|---|---|---|
className | string | - |
CardTitle
The CardTitle component is used for the card title.
| Prop | Type | Default |
|---|---|---|
className | string | - |
CardDescription
The CardDescription component is used for helper text under the title.
| Prop | Type | Default |
|---|---|---|
className | string | - |
CardAction
The CardAction component places content in the top-right of the header.
| Prop | Type | Default |
|---|---|---|
className | string | - |
CardContent
The CardContent component is used for the main card body.
| Prop | Type | Default |
|---|---|---|
className | string | - |
CardFooter
The CardFooter component is used for actions and secondary content at the bottom of the card.
| Prop | Type | Default |
|---|---|---|
className | string | - |