<Card className="w-full max-w-xs">
<CardHeader>
<CardTitle>Login to your account</CardTitle>
<CardDescription>
Enter your email below to login to your account
</CardDescription>
<CardAction>
<Button variant="link">Sign Up</Button>
</CardAction>
</CardHeader>
<CardContent>
<form>
<div className="flex flex-col gap-6">
<TextField className="w-full">
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
placeholder="m@example.com"
required
/>
</TextField>
<TextField className="w-full">
<div className="flex items-center">
<Label htmlFor="password">Password</Label>
<a
href="#"
className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
>
Forgot your password?
</a>
</div>
<Input id="password" type="password" required />
</TextField>
</div>
</form>
</CardContent>
<CardFooter className="flex-col gap-2">
<Button variant="primary" type="submit" className="w-full">
Login
</Button>
<Button variant="default" className="w-full">
Login with Google
</Button>
</CardFooter>
</Card>Installation
npx shadcn@latest add @dotui/cardUsage
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>Anatomy
<Card>
<CardHeader>
<CardTitle />
<CardDescription />
<CardAction />
</CardHeader>
<CardContent />
<CardFooter />
</Card>CardHeader holds the CardTitle, CardDescription, and an optional CardAction pinned at the end of the header row. CardContent is the main body and CardFooter sits below it, usually for actions.
Size
Pass size="sm" to Card for a more compact card with tighter spacing.
<Card size="sm">{/* ... */}</Card>Section borders
Add border-b to CardHeader or border-t to CardFooter to visually separate them from the content.
<CardHeader className="border-b">{/* ... */}</CardHeader>Examples
Default
Login Form
With Image
Beautiful Landscape
A stunning view that captures the essence of natural beauty.
Meeting Notes
API Reference
Card
A card groups related content and actions into a single container.
Supports all div attributes.
| Prop | Type | Default | |
|---|---|---|---|
CardHeader
The header of the card. Contains the title, description, and an optional action.
Supports all div attributes.
| Prop | Type | Default | |
|---|---|---|---|
CardTitle
CardDescription
CardAction
An action displayed at the end of the card header, such as a button or link.
Supports all div attributes.
| Prop | Type | Default | |
|---|---|---|---|
CardContent
CardFooter
Last updated on 7/9/2026