Card Showcase
Explore card component patterns and layouts
Cards group related content and actions. shadcn/ui's <Card> component comes with header, content, and footer sub-components.
Basic Card
card Basic
live demoGetting Started
Welcome to the platform. Start by choosing a category.
Card with Image
card With Image
live demoReact Hooks
Learn useState, useEffect, and custom hooks.
Interactive Card
card Interactive
live demoInteractive Card
Cards can have interactive elements like buttons and links.
Code Usage
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
;<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card description</CardDescription>
</CardHeader>
<CardContent>
<p>Main content</p>
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>
Patterns
- Use
CardHeader+CardContentfor informational cards - Add
CardFooterfor actions - Combine with
Linkfor clickable cards - Use
hover:shadow-mdfor interactive cards