Card

Composition preview

Try Card alongside its related data & surfaces components. These examples keep all actions local.

Usage

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

<>
<Card>
  <CardHeader><CardTitle>Upcoming posts</CardTitle><CardDescription>This week</CardDescription></CardHeader>
  <CardContent>Post list</CardContent>
  <CardFooter><Button variant="outline">View schedule</Button></CardFooter>
</Card>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction; size; asChild

Usage & accessibility

DashboardCard and LabPanel compose Card with existing 8px surfaces. Avoid decorative nested cards.

Implementation contract

src/components/ui/card.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.