Primitives · Application UI
Card
A composable card container with header, title, description, action, content, and footer sub-components, supporting a compact "sm" size variant.
Feature showcase
Installation
Features
11 examples
Default, Content Only, Frame Empty, Frame Footer, Frame Header, Frame Header Footer, Grid Layout, Login Form, Sizes, With Action, With Image.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "default" | "sm" | "default" | Controls padding and text size across all child slots; "sm" produces a more compact layout. |
| className | string | - | Additional CSS classes merged onto the root div. |
| children | React.ReactNode | - | Slot content, typically CardHeader, CardContent, CardFooter, and related sub-components. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/card.tsx |
| Default example | content/examples/card/default.tsx |
| Content Only example | content/examples/card/content-only.tsx |
| Frame Empty example | content/examples/card/frame-empty.tsx |
| Frame Footer example | content/examples/card/frame-footer.tsx |
| Frame Header example | content/examples/card/frame-header.tsx |
| Frame Header Footer example | content/examples/card/frame-header-footer.tsx |
| Grid Layout example | content/examples/card/grid-layout.tsx |
| Login Form example | content/examples/card/login-form.tsx |
| Sizes example | content/examples/card/sizes.tsx |
| With Action example | content/examples/card/with-action.tsx |
| With Image example | content/examples/card/with-image.tsx |