> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Card
> Contained surface for grouping related content and actions.
export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
const hostRef = React.useRef(null);
const handleRef = React.useRef(null);
const cardRef = React.useRef(null);
const containerRef = React.useRef(null);
const [previewWidth, setPreviewWidth] = React.useState(null);
const [isDragging, setIsDragging] = React.useState(false);
const [playgroundHref, setPlaygroundHref] = React.useState(null);
React.useEffect(function () {
if (!playground) return;
var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
var path = isLocal ? "/playground" : "/docs/playground";
var url = new URL(path, window.location.href);
url.hash = "code=" + playground;
setPlaygroundHref(url.href);
}, [playground]);
var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
React.useEffect(function () {
if (cardRef.current) {
var card = cardRef.current.closest(".group");
if (card) card.classList.remove("group");
}
var host = hostRef.current;
if (!host || !json) return;
function mount() {
if (!window.__prefab || !host) return;
var dark = document.documentElement.classList.contains("dark");
handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
dark: dark
});
if (bare && host.shadowRoot) {
var m = host.shadowRoot.querySelector("[data-prefab-mount]");
if (m) m.style.background = "transparent";
}
}
if (window.__prefab) {
mount();
} else {
if (!window.__prefabLoading) {
if (!window.__prefabReady) {
var s = document.createElement("script");
s.src = "/renderer.js";
document.head.appendChild(s);
}
window.__prefabLoading = new Promise(function (resolve) {
function check() {
if (window.__prefabReady) {
window.__prefabReady.then(resolve);
} else {
setTimeout(check, 10);
}
}
check();
});
}
window.__prefabLoading.then(mount);
}
var observer = new MutationObserver(function () {
var dark = document.documentElement.classList.contains("dark");
if (handleRef.current) handleRef.current.setDark(dark);
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return function () {
observer.disconnect();
if (handleRef.current) {
handleRef.current.unmount();
handleRef.current = null;
}
};
}, [json]);
function startResize(e) {
e.preventDefault();
var startX = e.clientX;
var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
setIsDragging(true);
function onMove(ev) {
var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
setPreviewWidth(w);
}
function onUp() {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
setIsDragging(false);
}
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
}
if (bare) {
return ;
}
if (resizable) {
return
{previewWidth &&
{previewWidth}px
}
{playgroundHref && }
{children}
;
}
return
{playgroundHref && }
{children}
;
};
Cards group related content into a bordered, shadowed container. They're composed from sub-components — `CardHeader`, `CardContent`, and `CardFooter` — that handle spacing and layout so you can focus on content.
## Basic Usage
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
Button,
P,
)
with Card():
with CardHeader():
CardTitle("Create project")
CardDescription("Deploy your new project in one-click.")
with CardContent():
P("Your project will be created with default settings.")
with CardFooter():
Button("Cancel", variant="outline")
Button("Deploy")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{"type": "CardTitle", "content": "Create project"},
{"type": "CardDescription", "content": "Deploy your new project in one-click."}
]
},
{
"type": "CardContent",
"children": [
{"content": "Your project will be created with default settings.", "type": "P"}
]
},
{
"type": "CardFooter",
"children": [
{
"type": "Button",
"label": "Cancel",
"variant": "outline",
"size": "default",
"disabled": false
},
{
"type": "Button",
"label": "Deploy",
"variant": "default",
"size": "default",
"disabled": false
}
]
}
]
}
}
```
## Structure
Cards follow a header → content → footer pattern. Each section is optional — use only what you need.
`CardHeader` is a grid that pairs a `CardTitle` with an optional `CardDescription`. `CardContent` provides horizontal padding for your main content. `CardFooter` renders as a flex row, naturally aligning action buttons side by side.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
Button,
P,
Muted,
)
with Card():
with CardHeader():
CardTitle("Account Settings")
CardDescription("Manage your account preferences and security.")
with CardContent():
P("Update your display name, email, and notification preferences from this panel.")
Muted("Changes take effect immediately.")
with CardFooter():
Button("Save changes")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{"type": "CardTitle", "content": "Account Settings"},
{
"type": "CardDescription",
"content": "Manage your account preferences and security."
}
]
},
{
"type": "CardContent",
"children": [
{
"content": "Update your display name, email, and notification preferences from this panel.",
"type": "P"
},
{"content": "Changes take effect immediately.", "type": "Muted"}
]
},
{
"type": "CardFooter",
"children": [
{
"type": "Button",
"label": "Save changes",
"variant": "default",
"size": "default",
"disabled": false
}
]
}
]
}
}
```
## Simple Cards
For lightweight use cases, you can skip the sub-components entirely and use `css_class` to add padding:
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Card,
H3,
P,
)
with Card(css_class="p-6"):
H3("Quick Stats")
P("42 active connections, 3 pending requests.")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "p-6",
"type": "Card",
"children": [
{"content": "Quick Stats", "type": "H3"},
{"content": "42 active connections, 3 pending requests.", "type": "P"}
]
}
}
```
## Card Grid
Cards work naturally with `Grid` for dashboard-style layouts:
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Card,
CardHeader,
CardTitle,
CardDescription,
Grid,
)
with Grid(columns=3, gap=4):
for title, desc in [
("Revenue", "$12,450"),
("Users", "1,234"),
("Uptime", "99.9%"),
]:
with Card():
with CardHeader():
CardDescription(title)
CardTitle(desc)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-4 grid-cols-3",
"type": "Grid",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{"type": "CardDescription", "content": "Revenue"},
{"type": "CardTitle", "content": "$12,450"}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{"type": "CardDescription", "content": "Users"},
{"type": "CardTitle", "content": "1,234"}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{"type": "CardDescription", "content": "Uptime"},
{"type": "CardTitle", "content": "99.9%"}
]
}
]
}
]
}
}
```
## API Reference
Additional Tailwind CSS classes. The card renders as a `div` with border, shadow, and rounded corners.
Additional Tailwind CSS classes. Renders as a grid with automatic spacing for title and description.
Title text. Can be passed as a positional argument. Alternatively, use child components instead of a string.
Additional Tailwind CSS classes.
Description text. Can be passed as a positional argument. Alternatively, use child components.
Additional Tailwind CSS classes.
Additional Tailwind CSS classes. Provides horizontal padding (`px-4`) for the main body area.
Additional Tailwind CSS classes. Renders as a flex row for action buttons.
## Protocol Reference
```json Card theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "Card",
"id?": "string",
"onMount?": "any",
"children?": "[Component]",
"let?": "object",
"cssClass?": "string"
}
```
```json CardHeader theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "CardHeader",
"id?": "string",
"onMount?": "any",
"children?": "[Component]",
"let?": "object",
"cssClass?": "string"
}
```
```json CardTitle theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "CardTitle",
"id?": "string",
"onMount?": "any",
"children?": "[Component]",
"let?": "object",
"content?": "string",
"cssClass?": "string"
}
```
```json CardDescription theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "CardDescription",
"id?": "string",
"onMount?": "any",
"children?": "[Component]",
"let?": "object",
"content?": "string",
"cssClass?": "string"
}
```
```json CardContent theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "CardContent",
"id?": "string",
"onMount?": "any",
"children?": "[Component]",
"let?": "object",
"cssClass?": "string"
}
```
```json CardFooter theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "CardFooter",
"id?": "string",
"onMount?": "any",
"children?": "[Component]",
"let?": "object",
"cssClass?": "string"
}
```
For the complete protocol schema, see [Card](/protocol/card), [CardHeader](/protocol/card-header), [CardTitle](/protocol/card-title), [CardDescription](/protocol/card-description), [CardContent](/protocol/card-content), [CardFooter](/protocol/card-footer).