Card
Displays a card with header, content, and footer.
Card Title
Card Description
Card Content
Card Footer
1<Card>...</Card>#Installation
1bunx barefoot add card#Usage
1import {2 Card,3 CardHeader,4 CardTitle,5 CardDescription,6 CardContent,7 CardFooter,8} from '@/components/ui/card'910export default function Page() {11 return (12 <Card>13 <CardHeader>14 <CardTitle>Card Title</CardTitle>15 <CardDescription>Card Description</CardDescription>16 </CardHeader>17 <CardContent>18 <p>Card Content</p>19 </CardContent>20 <CardFooter>21 <p>Card Footer</p>22 </CardFooter>23 </Card>24 )25}#Examples
#Simple
Notifications
You have 3 unread messages.
Your notifications will appear here.
1<Card>2 <CardHeader>3 <CardTitle>Notifications</CardTitle>4 <CardDescription>You have 3 unread messages.</CardDescription>5 </CardHeader>6 <CardContent>7 <p>Your notifications will appear here.</p>8 </CardContent>9</Card>#With Footer
Create project
Deploy your new project in one-click.
Configure your project settings here.
1<Card>2 <CardHeader>3 <CardTitle>Create project</CardTitle>4 <CardDescription>Deploy your new project in one-click.</CardDescription>5 </CardHeader>6 <CardContent>7 <p>Configure your project settings here.</p>8 </CardContent>9 <CardFooter>10 <Button>Create</Button>11 </CardFooter>12</Card>#Minimal
A simple card with only content.
1<Card>2 <CardContent class="pt-6">3 <p>A simple card with only content.</p>4 </CardContent>5</Card>#API Reference
Card
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content of the card (typically CardHeader, CardContent, CardFooter). |
| class | string | - | Additional CSS classes to apply. |
CardHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content of the header (typically CardTitle, CardDescription). |
| class | string | - | Additional CSS classes to apply. |
CardTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The title text. |
| class | string | - | Additional CSS classes to apply. |
CardDescription
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The description text. |
| class | string | - | Additional CSS classes to apply. |
CardContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The main content of the card. |
| class | string | - | Additional CSS classes to apply. |
CardFooter
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The footer content (typically actions like buttons). |
| class | string | - | Additional CSS classes to apply. |