card
Displays a card with header, content, and footer.
Philosophy
Cards are the universal container for grouped content. We decompose them into Header, Content, Footer, Title, and Description not because every card needs all five, but because real-world cards vary enormously. A pricing card needs a footer; a notification card doesn't. The sub-component pattern lets you compose exactly what you need.
Installation
npx @gentleduck/cli add card
npx @gentleduck/cli add card
Usage
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
<CardAction>Card Action</CardAction>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
<CardFooter>
<p>Card Footer</p>
</CardFooter>
</Card><Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
<CardAction>Card Action</CardAction>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
<CardFooter>
<p>Card Footer</p>
</CardFooter>
</Card>Component Composition
API Reference
Card
| Prop | Type | Default | Description |
|---|---|---|---|
dir | 'ltr' | 'rtl' | -- | Text direction override. Resolved via useDirection (dir prop -> DirectionProvider -> 'ltr'). |
className | string | -- | Additional CSS classes applied to the card container |
children | React.ReactNode | -- | Card content |
...props | React.HTMLProps<HTMLDivElement> | -- | Additional props to spread to the content div |
CardHeader
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS classes applied to the header |
children | React.ReactNode | -- | Header content |
...props | React.HTMLProps<HTMLDivElement> | -- | Additional props to spread to the content div |
CardTitle
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS classes applied to the title |
children | React.ReactNode | -- | Title content |
...props | React.HTMLProps<HTMLDivElement> | -- | Additional props to spread to the content div |
CardDescription
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS classes applied to the description |
children | React.ReactNode | -- | Description content |
...props | React.HTMLProps<HTMLDivElement> | -- | Additional props to spread to the content div |
CardAction
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS classes applied to the action container |
children | React.ReactNode | -- | Action content (e.g. buttons, icons) |
...props | React.HTMLProps<HTMLDivElement> | -- | Additional props to spread to the content div |
CardContent
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS classes applied to the content area |
children | React.ReactNode | -- | Main card content |
...props | React.HTMLProps<HTMLDivElement> | -- | Additional props to spread to the content div |
CardFooter
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS classes applied to the footer |
children | React.ReactNode | -- | Footer content |
...props | React.HTMLProps<HTMLDivElement> | -- | Additional props to spread to the content div |
RTL Support
Direction is resolved through the shared primitives direction module. Use a local dir="rtl" override when the component exposes it, or set DirectionProvider at app/root level for global RTL/LTR behavior.