---
category: layout
---

# Card

Source: `components/ui/card.tsx`.

`Card` is a compound component. Its parts are exported **flat** (`CardHeader`, not
`Card.Header`) and each is a separate top-level export of the bundle:

| Part | Props |
| --- | --- |
| `CardHeader` | `React.ComponentProps<'div'>` |
| `CardFooter` | `React.ComponentProps<'div'>` |
| `CardTitle` | `React.ComponentProps<'div'>` |
| `CardAction` | `React.ComponentProps<'div'>` |
| `CardDescription` | `React.ComponentProps<'div'>` |
| `CardContent` | `React.ComponentProps<'div'>` |

All parts accept `className` and are composed as children of `Card`.