components / display
Card
Group related content into a header, body, and footer.
377 B gzip runs on the server · 0 JS
loopvet
in productionmanagement system for veterinary clinics.
scheduling, records, and billing on a single screen.
card-default.tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
export default function CardDefault() {
return (
<Card className="w-full max-w-sm">
<CardHeader>
<div className="flex items-center justify-between gap-2">
<CardTitle>loopvet</CardTitle>
<Badge variant="brand">in production</Badge>
</div>
<CardDescription>management system for veterinary clinics.</CardDescription>
</CardHeader>
<CardContent className="text-muted-foreground">scheduling, records, and billing on a single screen.</CardContent>
<CardFooter>
<Button size="sm">open</Button>
<Button size="sm" variant="ghost">
details
</Button>
</CardFooter>
</Card>
);
}Installation
$ npx shadcn@latest add https://cd-ui.vercel.app/r/card.jsonfirst time? set up components.json and the theme first: see installation.
Usage
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
<Card>
<CardHeader>
<CardTitle>title</CardTitle>
</CardHeader>
<CardContent>content</CardContent>
</Card>API
Card
Surface with a thin border and a slightly raised background. Server component.
| prop | type | default |
|---|---|---|
classNameExtra classes, merged with | string | - |
CardHeader · CardTitle · CardDescription
Header, title (<h3>), and description.
| prop | type | default |
|---|---|---|
classNameExtra classes, merged with | string | - |
CardContent · CardFooter
Body and footer (row of actions).
| prop | type | default |
|---|---|---|
classNameExtra classes, merged with | string | - |