Card
Renders a card component comprising a header, content section, and footer...
Jungle Safari Adventure
Explore the wild and enjoy a thrilling jungle safari experience.
4.8 (120 reviews)
5 hrs
Group: 20
Rainforest
Installation
npx shadcn@latest add https://scrollxui.dev/registry/card.json 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><Card className="custom-card-style">
<CardHeader>
<CardTitle>Custom Card</CardTitle>
<CardDescription>This card has a custom style.</CardDescription>
<CardAction>Card Action</CardAction>
</CardHeader>
<CardContent>
<p>Additional content with custom styles.</p>
</CardContent>
<CardFooter>
<Button variant="link">Learn More</Button>
</CardFooter>
</Card>Changelog
24-09-2025, Added CardAction
- Introduced a new
CardActioncomponent to place actions (buttons, links) in the CardHeader aligned to the top-right. - Minor updates to existing components to include
data-slotattributes for consistent styling.
API Reference
Card
The Card component is used to create a customizable container with content sections such as title, description, and footer.