The Card component serves as a versatile container for grouping related content. It provides a structured layout with optional header, content, action, and footer areas.
Installation
npx shadcn@latest add @eo-n/card
Copy the component code
Copy and paste the Card component code into your project at components/ui/card.tsx.import * as React from "react";
import { cn } from "@/lib/utils";
function Card({
className,
flush = false,
...props
}: React.ComponentProps<"div"> & { flush?: boolean }) {
return (
<div
data-slot="card"
data-flush={flush}
className={cn(
"bg-card text-card-foreground group flex flex-col gap-6 overflow-hidden rounded-xl border py-6",
flush && "py-0",
className
)}
{...props}
/>
);
}
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-header"
className={cn(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
"group-data-[flush=true]:border-b group-data-[flush=true]:p-6",
className
)}
{...props}
/>
);
}
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-title"
className={cn("leading-none font-semibold", className)}
{...props}
/>
);
}
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
);
}
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-action"
className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className
)}
{...props}
/>
);
}
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-content"
className={cn("px-6", className)}
{...props}
/>
);
}
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn(
"flex items-center px-6",
"group-data-[flush=true]:bg-muted/60 group-data-[flush=true]:border-t group-data-[flush=true]:p-6",
className
)}
{...props}
/>
);
}
export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardAction,
CardDescription,
CardContent,
};
Update imports
Update the import paths to match your project setup.
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
<Card>
<CardHeader>
<CardTitle>Product 1</CardTitle>
<CardDescription>Product description</CardDescription>
<CardAction>Product action</CardAction>
</CardHeader>
<CardContent>
<p>Product Content</p>
</CardContent>
<CardFooter>
<p>Product Footer</p>
</CardFooter>
</Card>
Component API
The root container component.
When true, removes default padding and adjusts header/footer styling for a flush layout.
Additional CSS classes to apply to the card.
Additional CSS classes to apply to the header.
CardTitle
Displays the main heading for the card.
Additional CSS classes to apply to the title.
CardDescription
Displays secondary descriptive text below the title.
Additional CSS classes to apply to the description.
CardAction
Container for action elements (buttons, icons) positioned in the top-right corner of the header.
Additional CSS classes to apply to the action container.
CardContent
Main content area of the card.
Additional CSS classes to apply to the content.
Additional CSS classes to apply to the footer.
Examples
Basic Card
<Card>
<CardHeader>
<CardTitle>Welcome</CardTitle>
<CardDescription>Get started with your dashboard</CardDescription>
</CardHeader>
<CardContent>
<p>Your main content goes here.</p>
</CardContent>
</Card>
Card with Action
<Card>
<CardHeader>
<CardTitle>Settings</CardTitle>
<CardDescription>Manage your preferences</CardDescription>
<CardAction>
<Button variant="ghost" size="sm">Edit</Button>
</CardAction>
</CardHeader>
<CardContent>
<p>Settings content here.</p>
</CardContent>
</Card>
Flush Card
<Card flush>
<CardHeader>
<CardTitle>Flush Layout</CardTitle>
<CardDescription>No padding on the card itself</CardDescription>
</CardHeader>
<CardContent>
<p>Content extends to the edges.</p>
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>
