Create project
Deploy your new project in one click.
Card content goes here.
---
import { Button } from "@/components/ui/button"
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
---
<Card class="w-full max-w-md">
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription>Deploy your new project in one click.</CardDescription>
<CardAction>
<Button size="sm" variant="outline">Manage</Button>
</CardAction>
</CardHeader>
<CardContent>
<p>Card content goes here.</p>
</CardContent>
<CardFooter class="border-t">
<Button size="sm">Continue</Button>
</CardFooter>
</Card>Installation
Command
npx shadcn@latest add @fulldev/cardManual
- Copy and paste the card component files into your project.
- Update the import paths to match your project setup.
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>Composition
Use the following composition to build a Card:
Card
├── CardHeader
│ ├── CardTitle
│ ├── CardDescription
│ └── CardAction
├── CardContent
└── CardFooterExamples
Image
Add an image before the card header to create a card with an image.
Image Card
Card with media in the top slot.
The first child image automatically gets top rounding behavior.
---
import { Image } from "astro:assets"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import image from "@/assets/placeholder.webp"
---
<Card class="max-w-md">
<Image
src={image}
alt="Card image"
class="aspect-video w-full object-cover"
/>
<CardHeader>
<CardTitle>Image Card</CardTitle>
<CardDescription>Card with media in the top slot.</CardDescription>
</CardHeader>
<CardContent>
<p>The first child image automatically gets top rounding behavior.</p>
</CardContent>
</Card>API Reference
See the GitHub source code for more information on props.