Card.

The fundamental unit of containment. Cards group related information and actions, creating a distinct optical boundary that separates signal from noise in dense interfaces.

import { Card, CardHeader, CardContent } from "@/components/ui/card"

Configuration

Scenario

Appearance

Options

Active

Payment Method

Manage your billing details.

Visa ending in 4242

Expires 12/24

Structured Data Layout

Compound Component Pattern

Avoids the 'Prop Drilling Hell'. Instead of passing 20 props to a single <Card />, we decompose it into sub-components (Header, Content, Footer) that manage their own spacing and logic.

Interaction Stability

The 'stable' variant removes hover lift effects. This is crucial for cards containing complex forms or inputs, where layout shifts on hover can degrade the typing experience and precision.

DashboardWidget.tsx

<Card variant="default">
  <CardHeader>
    <CardTitle>Revenue</CardTitle>
    <CardDescription>Monthly recurring.</CardDescription>
  </CardHeader>
  
  <CardContent>
    <span className="text-2xl font-bold">$12,450</span>
  </CardContent>
  
  <CardFooter>
    <Button size="sm">Download CSV</Button>
  </CardFooter>
</Card>