Card
A bordered surface for related content and actions.
Preview
Installation
pnpm dlx shadcn@latest add https://migoy.stanleyaf.com/r/card.jsonCard uses your existing theme and cn utility. Install Button separately to use the preview as written.
Usage
import { Card, CardContent } from '@/components/ui/card';
<Card>
<CardContent>Next invoice due December 1.</CardContent>
</Card>Composition
Card
├── CardHeader
│ ├── CardTitle
│ ├── CardDescription
│ └── CardAction
├── CardContent
└── CardFooterUse Card with CardContent for a simple body. Add CardHeader for a title or description. Place CardAction directly inside the header to align it beside the title. Use CardFooter for actions or supporting information below the body.
Background
Set className on an individual card to override its surface. Use bg-background text-foreground to match the page canvas in both themes.
Billing contact
Accessibility
Put a heading inside CardTitle when the card introduces a section. Choose the heading level from the page hierarchy. Keep the card surface out of the tab order and use native links for navigation or buttons for actions. Tab moves between those controls in document order.
API
Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, and CardFooter each render a div and accept standard div props.
| Prop | Type | Purpose |
|---|---|---|
children | React.ReactNode | Nested Card parts or content |
className | string | Add layout utilities or a divider with border-b on the header or border-t on the footer |
ref | React.Ref<HTMLDivElement> | Access the rendered element |
The slot structure follows shadcn Card. Migoy uses its own surface tokens and a single spacing treatment.