Components
Card
A flexible container with header, content, and footer slots.
Card is a set of composable layout components. Each sub-component uses a data-slot attribute so you can target them with CSS if needed.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/card.jsonUsage
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
export default function Example() {
return (
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description</CardDescription>
</CardHeader>
<CardContent>Content</CardContent>
</Card>
);
}Examples
Default
Project ready
Deploy your first component in minutes.
v1.0
Card content goes here. Use it for summaries, forms, or media.
Compact
Pass size="sm" for a denser card with tighter spacing:
Compact card
Uses reduced padding.
Content
Components
| Component | Description |
|---|---|
Card | Root container. Accepts size ("default" or "sm"). |
CardHeader | Top section, lays out title and description. |
CardTitle | Heading text. |
CardDescription | Muted supporting text. |
CardAction | Aligned to the inline end of the header. |
CardContent | Main body. |
CardFooter | Bottom section. |
Last updated on