> ## 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.
# Welcome to Prefab 🎨
> The generative UI framework that even humans can use.
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}
;
};
**Prefab is a UI framework for building rich, interactive interfaces in Python.** Create [MCP Apps](/running/fastmcp), data dashboards, interactive tools, and more with 100+ prebuilt components. A bundled React renderer turns everything into a self-contained application.
Composing frontends in Python is ~~blasphemous~~ surprisingly natural. Prefab's DSL uses context managers for nesting components, making it both token-efficient and streaming-compatible. As a result, you (or your agent) can declare UIs in advance or generate them on the fly. A reactive state system handles client-side interactivity with no JavaScript required, and MCP and REST backends are (optionally!) supported out of the box.
70 ? 'destructive' : (ctx_tick % 20 * 3 + 20 <= 33 ? 'success' : 'default') }}","size":"default"}]}]}]}]},{"cssClass":"pb-0 gap-0","type":"Card","children":[{"type":"CardContent","children":[{"type":"Metric","label":"Fjords designed","value":"1,847","delta":"+3 coastlines"}]},{"cssClass":"h-16","type":"Sparkline","data":[820,950,1100,980,1250,1400,1350,1500,1680,1847],"variant":"success","fill":true,"curve":"linear","strokeWidth":1.5}]}]},{"type":"Card","children":[{"type":"CardHeader","children":[{"type":"CardTitle","content":"Towel Incidents"}]},{"type":"CardContent","children":[{"type":"BarChart","data":[{"month":"Jan","lost":8,"found":5},{"month":"Feb","lost":24,"found":15},{"month":"Mar","lost":12,"found":28},{"month":"Apr","lost":35,"found":19},{"month":"May","lost":18,"found":38},{"month":"Jun","lost":42,"found":30}],"series":[{"dataKey":"lost","label":"Lost"},{"dataKey":"found","label":"Found"}],"xAxis":"month","height":200,"stacked":false,"horizontal":false,"barRadius":4,"showLegend":true,"showTooltip":true,"animate":true,"showGrid":true,"showYAxis":true,"valueFormat":"auto"}]}]},{"cssClass":"gap-4 grid-cols-2","type":"Grid","children":[{"cssClass":"gap-4","type":"Column","children":[{"type":"Card","children":[{"type":"CardContent","children":[{"cssClass":"gap-2","type":"Column","children":[{"name":"checkbox_12","value":true,"type":"Checkbox","label":"Towel packed","disabled":false,"required":false},{"name":"checkbox_13","value":true,"type":"Checkbox","label":"Guide charged","disabled":false,"required":false},{"name":"checkbox_14","value":false,"type":"Checkbox","label":"Babel fish inserted","disabled":false,"required":false}]}]}]},{"type":"Card","children":[{"type":"CardHeader","children":[{"type":"CardTitle","content":"Marvin's Mood"}]},{"type":"CardContent","children":[{"cssClass":"gap-3","type":"Column","children":[{"content":"How's life?","type":"P"},{"cssClass":"gap-2","type":"Column","children":[{"type":"Button","label":"Meh","variant":"default","size":"default","disabled":false,"onClick":{"action":"showToast","message":"Noted. Enthusiasm levels nominal."}},{"type":"Button","label":"Depressed","variant":"info","size":"default","disabled":false,"onClick":{"action":"showToast","message":"I think you ought to know I'm feeling very depressed."}},{"type":"Button","label":"Don't talk to me about life","variant":"warning","size":"default","disabled":false,"onClick":{"action":"showToast","message":"Brain the size of a planet and they ask me to pick up a piece of paper."}}]}]}]}]}]},{"cssClass":"gap-4","type":"Column","children":[{"type":"Card","children":[{"type":"CardContent","children":[{"cssClass":"gap-2 items-center","type":"Row","children":[{"type":"Loader","variant":"dots","size":"sm"},{"content":"Marvin is thinking...","type":"Muted"}]}]}]},{"type":"Card","children":[{"type":"CardContent","children":[{"type":"DataTable","columns":[{"key":"crew","header":"Crew","sortable":true},{"key":"species","header":"Species","sortable":true},{"key":"towel","header":"Towel?","sortable":true},{"key":"status","header":"Status","sortable":true}],"rows":[{"crew":"Arthur Dent","species":"Human","towel":"Yes","status":"Confused"},{"crew":"Ford Prefect","species":"Betelgeusian","towel":"Always","status":"Drinking"},{"crew":"Zaphod","species":"Betelgeusian","towel":"Lost it","status":"Presidential"},{"crew":"Trillian","species":"Human","towel":"Yes","status":"Navigating"},{"crew":"Marvin","species":"Android","towel":"No point","status":"Depressed"},{"crew":"Slartibartfast","species":"Magrathean","towel":"Somewhere","status":"Designing"}],"search":true,"paginated":false,"pageSize":10}]}]}]}]}]}]}]}]},"state":{"improbability":42,"autoscale":true,"code_mode":true,"cache":false,"radio_16":false,"radio_17":false,"radio_18":true,"checkbox_12":true,"checkbox_13":true,"checkbox_14":false,"ctx_tick":0}}}>
```python Python expandable icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
"""The Hitchhiker's Guide dashboard from the Prefab welcome page.
Run with:
prefab serve examples/hitchhikers-guide/dashboard.py
prefab export examples/hitchhikers-guide/dashboard.py
"""
from prefab_ui import PrefabApp
from prefab_ui.actions import SetInterval, SetState, ShowToast
from prefab_ui.components import (
Alert,
AlertDescription,
AlertTitle,
Badge,
Button,
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
Carousel,
Checkbox,
Column,
Combobox,
ComboboxOption,
DataTable,
DataTableColumn,
DatePicker,
Dialog,
Grid,
GridItem,
HoverCard,
Loader,
Metric,
Muted,
P,
Progress,
Radio,
RadioGroup,
Ring,
Row,
Separator,
Slider,
Switch,
Text,
Tooltip,
)
from prefab_ui.components.charts import (
BarChart,
ChartSeries,
RadarChart,
Sparkline,
)
from prefab_ui.components.control_flow import Else, If
from prefab_ui.rx import Rx
ctx_tick = Rx("ctx_tick")
# Context window: climbs from 24% to ~78%, then resets
ctx_pct = (ctx_tick % 20) * 3 + 20
ctx_variant = (ctx_pct > 70).then(
"destructive", (ctx_pct <= 33).then("success", "default")
)
with PrefabApp(
title="Prefab Showcase",
state={"ctx_tick": 0, "improbability": 42},
on_mount=SetInterval(
400,
on_tick=SetState("ctx_tick", ctx_tick + 1),
),
) as app:
with Grid(columns={"default": 1, "md": 2, "lg": 4}, gap=4):
# ── Col 1 ─────────────────────────────────────────────────────────
with Column(gap=4):
with Card():
with CardHeader():
CardTitle("Register Towel")
CardDescription("The most important item in the galaxy")
with CardContent():
with Column(gap=3):
with Combobox(
placeholder="Type...",
search_placeholder="Search types...",
):
ComboboxOption("Bath", value="bath")
ComboboxOption("Beach", value="beach")
ComboboxOption("Interstellar", value="interstellar")
ComboboxOption("Microfiber", value="micro")
DatePicker(placeholder="Registration date")
with CardFooter():
with Row(gap=2):
with Dialog(
title="Towel Registered!",
description="Your towel has been added to the galactic registry.",
):
Button("Register")
Text("Don't forget to bring it.")
Button("Cancel", variant="outline")
with If("{{ !pressed }}"):
Button(
"This is probably the best button to press.",
variant="success",
on_click=SetState("pressed", True),
)
with Else():
Button(
"Please do not press this button again.",
variant="destructive",
on_click=SetState("pressed", False),
)
with Card():
with CardHeader():
CardTitle("Ship Status")
with CardContent():
with Column(gap=3):
with Row(
align="center",
css_class="justify-between",
):
Text("heart-of-gold")
with HoverCard(open_delay=0, close_delay=200):
Badge("In Orbit", variant="default")
with Column(gap=2):
Text("heart-of-gold")
Muted("Deployed 2h ago")
Progress(
value=100,
max=100,
variant="success",
)
Progress(
value=100,
max=100,
indicator_class="bg-yellow-400",
)
with Row(
align="center",
css_class="justify-between",
):
Text("vogon-poetry")
with Tooltip("64% — ETA 12 min", delay=0):
with Badge(variant="secondary"):
Loader(size="sm")
Text("Deploying")
Progress(value=64, max=100)
with Row(
align="center",
css_class="justify-between",
):
Text("deep-thought")
with Tooltip(
"Computing... 7.5 million years remaining",
delay=0,
):
with Badge(variant="outline"):
Loader(size="sm", variant="ios")
Text("Soon...")
Progress(value=12, max=100)
with Card():
with CardHeader():
CardTitle("Planet Ratings")
with CardContent():
RadarChart(
data=[
{"axis": "Views", "earth": 30, "mag": 95},
{"axis": "Fjords", "earth": 65, "mag": 100},
{"axis": "Pubs", "earth": 90, "mag": 10},
{"axis": "Mice", "earth": 40, "mag": 85},
{"axis": "Tea", "earth": 95, "mag": 15},
{"axis": "Safety", "earth": 45, "mag": 70},
],
series=[
ChartSeries(dataKey="earth", label="Earth"),
ChartSeries(dataKey="mag", label="Magrathea"),
],
axis_key="axis",
height=200,
show_legend=True,
show_tooltip=True,
)
# ── Col 2 ─────────────────────────────────────────────────────────
with Column(gap=4):
with Card():
with CardHeader():
CardTitle("Survival Odds")
with CardContent(css_class="w-fit mx-auto"):
Ring(
value=42,
label="42%",
variant="info",
size="lg",
thickness=12,
indicator_class="group-hover:drop-shadow-[0_0_24px_rgba(59,130,246,0.9)]",
)
with Card():
with CardHeader():
with Row(gap=2, align="center"):
CardTitle("Improbability Drive")
Loader(
variant="pulse",
size="sm",
css_class="text-blue-500",
)
with CardContent():
with Column(gap=2):
Slider(
min=0,
max=100,
value=42,
name="improbability",
)
with Row(
align="center",
css_class="justify-between",
):
Muted("Probable")
Muted("Infinite")
with Carousel(auto_advance=3000, show_controls=False, direction="up"):
with Alert(variant="success", icon="circle-check"):
AlertTitle("Don't Panic")
AlertDescription("Normality achieved.")
with Alert(variant="destructive", icon="triangle-alert"):
AlertTitle("Display Department")
AlertDescription("Beware of the leopard.")
with Card():
with CardHeader():
CardTitle("Prefect Horizon Config")
with CardContent():
with Column(gap=3):
Switch(
label="Auto-scale agents",
value=True,
name="autoscale",
)
Separator()
Switch(
label="Code Mode",
value=True,
name="code_mode",
)
Separator()
Switch(
label="Tool call caching",
value=False,
name="cache",
)
with CardFooter():
Button(
"Save Preferences",
on_click=ShowToast("Preferences saved!"),
)
with Card():
with CardHeader():
CardTitle("Travel Class")
with CardContent():
with RadioGroup(name="travel_class"):
Radio(option="economy", label="Economy")
Radio(option="business", label="Business Class")
Radio(
option="improbability",
label="Infinite Improbability",
value=True,
)
# ── Cols 3–4: summary row, chart, then 2-col grid below ─────────
with GridItem(css_class="md:col-span-2"):
with Column(gap=4):
with Grid(columns=2, gap=4, css_class="h-32"):
with Card():
with CardHeader():
CardTitle("Context Window")
with CardContent():
with Column(
gap=6,
justify="center",
css_class="h-full",
):
with Row(
align="center",
css_class="justify-between",
):
Text(f"{ctx_pct}% used")
Muted(f"{ctx_pct * 2}k / 200k tokens")
with Tooltip(
"Auto-compact buffer: 12%",
delay=0,
):
Progress(
value=ctx_pct,
max=100,
variant=ctx_variant,
)
with Card(css_class="pb-0 gap-0"):
with CardContent():
Metric(
label="Fjords designed",
value="1,847",
delta="+3 coastlines",
)
Sparkline(
data=[
820,
950,
1100,
980,
1250,
1400,
1350,
1500,
1680,
1847,
],
variant="success",
fill=True,
css_class="h-16",
)
with Card():
with CardHeader():
CardTitle("Towel Incidents")
with CardContent():
BarChart(
data=[
{"month": "Jan", "lost": 8, "found": 5},
{"month": "Feb", "lost": 24, "found": 15},
{"month": "Mar", "lost": 12, "found": 28},
{"month": "Apr", "lost": 35, "found": 19},
{"month": "May", "lost": 18, "found": 38},
{"month": "Jun", "lost": 42, "found": 30},
],
series=[
ChartSeries(dataKey="lost", label="Lost"),
ChartSeries(dataKey="found", label="Found"),
],
x_axis="month",
height=200,
bar_radius=4,
show_legend=True,
show_tooltip=True,
show_grid=True,
)
with Grid(columns=2, gap=4):
with Column(gap=4):
with Card():
with CardContent():
with Column(gap=2):
Checkbox(label="Towel packed", value=True)
Checkbox(label="Guide charged", value=True)
Checkbox(
label="Babel fish inserted",
value=False,
)
with Card():
with CardHeader():
CardTitle("Marvin's Mood")
with CardContent():
with Column(gap=3):
P("How's life?")
with Column(gap=2):
Button(
"Meh",
on_click=ShowToast(
"Noted. Enthusiasm levels nominal."
),
)
Button(
"Depressed",
variant="info",
on_click=ShowToast(
"I think you ought to "
"know I'm feeling very "
"depressed."
),
)
Button(
"Don't talk to me about life",
variant="warning",
on_click=ShowToast(
"Brain the size of a "
"planet and they ask me "
"to pick up a piece of "
"paper."
),
)
with Column(gap=4):
with Card():
with CardContent():
with Row(gap=2, align="center"):
Loader(variant="dots", size="sm")
Muted("Marvin is thinking...")
with Card():
with CardContent():
DataTable(
columns=[
DataTableColumn(
key="crew",
header="Crew",
sortable=True,
),
DataTableColumn(
key="species",
header="Species",
sortable=True,
),
DataTableColumn(
key="towel",
header="Towel?",
sortable=True,
),
DataTableColumn(
key="status",
header="Status",
sortable=True,
),
],
rows=[
{
"crew": "Arthur Dent",
"species": "Human",
"towel": "Yes",
"status": "Confused",
},
{
"crew": "Ford Prefect",
"species": "Betelgeusian",
"towel": "Always",
"status": "Drinking",
},
{
"crew": "Zaphod",
"species": "Betelgeusian",
"towel": "Lost it",
"status": "Presidential",
},
{
"crew": "Trillian",
"species": "Human",
"towel": "Yes",
"status": "Navigating",
},
{
"crew": "Marvin",
"species": "Android",
"towel": "No point",
"status": "Depressed",
},
{
"crew": "Slartibartfast",
"species": "Magrathean",
"towel": "Somewhere",
"status": "Designing",
},
],
search=True,
paginated=False,
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "pf-app-root",
"onMount": {
"action": "setInterval",
"duration": 400,
"onTick": {"action": "setState", "key": "ctx_tick", "value": "{{ ctx_tick + 1 }}"}
},
"type": "Div",
"children": [
{
"cssClass": "gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
"type": "Grid",
"children": [
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{"type": "CardTitle", "content": "Register Towel"},
{"type": "CardDescription", "content": "The most important item in the galaxy"}
]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{
"name": "combobox_12",
"type": "Combobox",
"placeholder": "Type...",
"searchPlaceholder": "Search types...",
"disabled": false,
"invalid": false,
"children": [
{"type": "ComboboxOption", "value": "bath", "label": "Bath", "disabled": false},
{
"type": "ComboboxOption",
"value": "beach",
"label": "Beach",
"disabled": false
},
{
"type": "ComboboxOption",
"value": "interstellar",
"label": "Interstellar",
"disabled": false
},
{
"type": "ComboboxOption",
"value": "micro",
"label": "Microfiber",
"disabled": false
}
]
},
{
"name": "datepicker_4",
"type": "DatePicker",
"placeholder": "Registration date"
}
]
}
]
},
{
"type": "CardFooter",
"children": [
{
"cssClass": "gap-2",
"type": "Row",
"children": [
{
"type": "Dialog",
"title": "Towel Registered!",
"description": "Your towel has been added to the galactic registry.",
"dismissible": true,
"children": [
{
"type": "Button",
"label": "Register",
"variant": "default",
"size": "default",
"disabled": false
},
{"content": "Don't forget to bring it.", "type": "Text"}
]
},
{
"type": "Button",
"label": "Cancel",
"variant": "outline",
"size": "default",
"disabled": false
}
]
}
]
}
]
},
{
"type": "Condition",
"cases": [
{
"when": "{{ !pressed }}",
"children": [
{
"type": "Button",
"label": "This is probably the best button to press.",
"variant": "success",
"size": "default",
"disabled": false,
"onClick": {"action": "setState", "key": "pressed", "value": true}
}
]
}
],
"else": [
{
"type": "Button",
"label": "Please do not press this button again.",
"variant": "destructive",
"size": "default",
"disabled": false,
"onClick": {"action": "setState", "key": "pressed", "value": false}
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Ship Status"}]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{
"cssClass": "items-center justify-between",
"type": "Row",
"children": [
{"content": "heart-of-gold", "type": "Text"},
{
"type": "HoverCard",
"openDelay": 0,
"closeDelay": 200,
"children": [
{"type": "Badge", "label": "In Orbit", "variant": "default"},
{
"cssClass": "gap-2",
"type": "Column",
"children": [
{"content": "heart-of-gold", "type": "Text"},
{"content": "Deployed 2h ago", "type": "Muted"},
{
"type": "Progress",
"value": 100.0,
"max": 100.0,
"variant": "success",
"size": "default"
}
]
}
]
}
]
},
{
"cssClass": "pf-progress-flat",
"type": "Progress",
"value": 100.0,
"max": 100.0,
"variant": "default",
"size": "default",
"indicatorClass": "bg-yellow-400"
},
{
"cssClass": "items-center justify-between",
"type": "Row",
"children": [
{"content": "vogon-poetry", "type": "Text"},
{
"type": "Tooltip",
"content": "64% \u2014 ETA 12 min",
"delay": 0,
"children": [
{
"type": "Badge",
"variant": "secondary",
"children": [
{"type": "Loader", "variant": "spin", "size": "sm"},
{"content": "Deploying", "type": "Text"}
]
}
]
}
]
},
{
"type": "Progress",
"value": 64.0,
"max": 100.0,
"variant": "default",
"size": "default"
},
{
"cssClass": "items-center justify-between",
"type": "Row",
"children": [
{"content": "deep-thought", "type": "Text"},
{
"type": "Tooltip",
"content": "Computing... 7.5 million years remaining",
"delay": 0,
"children": [
{
"type": "Badge",
"variant": "outline",
"children": [
{"type": "Loader", "variant": "ios", "size": "sm"},
{"content": "Soon...", "type": "Text"}
]
}
]
}
]
},
{
"type": "Progress",
"value": 12.0,
"max": 100.0,
"variant": "default",
"size": "default"
}
]
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Planet Ratings"}]
},
{
"type": "CardContent",
"children": [
{
"type": "RadarChart",
"data": [
{"axis": "Views", "earth": 30, "mag": 95},
{"axis": "Fjords", "earth": 65, "mag": 100},
{"axis": "Pubs", "earth": 90, "mag": 10},
{"axis": "Mice", "earth": 40, "mag": 85},
{"axis": "Tea", "earth": 95, "mag": 15},
{"axis": "Safety", "earth": 45, "mag": 70}
],
"series": [
{"dataKey": "earth", "label": "Earth"},
{"dataKey": "mag", "label": "Magrathea"}
],
"axisKey": "axis",
"height": 200,
"filled": true,
"showDots": false,
"showLegend": true,
"showTooltip": true,
"animate": true,
"showGrid": true
}
]
}
]
}
]
},
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Survival Odds"}]
},
{
"cssClass": "w-fit mx-auto",
"type": "CardContent",
"children": [
{
"type": "Ring",
"value": 42.0,
"min": 0,
"max": 100,
"label": "42%",
"variant": "info",
"size": "lg",
"thickness": 12.0,
"indicatorClass": "group-hover:drop-shadow-[0_0_24px_rgba(59,130,246,0.9)]"
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{
"cssClass": "gap-2 items-center",
"type": "Row",
"children": [
{"type": "CardTitle", "content": "Improbability Drive"},
{
"cssClass": "text-blue-500",
"type": "Loader",
"variant": "pulse",
"size": "sm"
}
]
}
]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-2",
"type": "Column",
"children": [
{
"name": "improbability",
"value": 42.0,
"type": "Slider",
"min": 0.0,
"max": 100.0,
"disabled": false,
"size": "default"
},
{
"cssClass": "items-center justify-between",
"type": "Row",
"children": [
{"content": "Probable", "type": "Muted"},
{"content": "Infinite", "type": "Muted"}
]
}
]
}
]
}
]
},
{
"type": "Carousel",
"visible": 1,
"gap": 16,
"direction": "up",
"loop": true,
"autoAdvance": 3000,
"continuous": false,
"speed": 2,
"effect": "slide",
"dimInactive": false,
"showControls": false,
"controlsPosition": "outside",
"showDots": false,
"pauseOnHover": true,
"align": "start",
"slidesToScroll": 1,
"drag": true,
"children": [
{
"type": "Alert",
"variant": "success",
"icon": "circle-check",
"children": [
{"type": "AlertTitle", "content": "Don't Panic"},
{"type": "AlertDescription", "content": "Normality achieved."}
]
},
{
"type": "Alert",
"variant": "destructive",
"icon": "triangle-alert",
"children": [
{"type": "AlertTitle", "content": "Display Department"},
{"type": "AlertDescription", "content": "Beware of the leopard."}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Prefect Horizon Config"}]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{
"name": "autoscale",
"value": true,
"type": "Switch",
"label": "Auto-scale agents",
"size": "default",
"disabled": false,
"required": false
},
{"type": "Separator", "orientation": "horizontal"},
{
"name": "code_mode",
"value": true,
"type": "Switch",
"label": "Code Mode",
"size": "default",
"disabled": false,
"required": false
},
{"type": "Separator", "orientation": "horizontal"},
{
"name": "cache",
"value": false,
"type": "Switch",
"label": "Tool call caching",
"size": "default",
"disabled": false,
"required": false
}
]
}
]
},
{
"type": "CardFooter",
"children": [
{
"type": "Button",
"label": "Save Preferences",
"variant": "default",
"size": "default",
"disabled": false,
"onClick": {"action": "showToast", "message": "Preferences saved!"}
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Travel Class"}]
},
{
"type": "CardContent",
"children": [
{
"name": "travel_class",
"type": "RadioGroup",
"children": [
{
"name": "radio_16",
"value": false,
"type": "Radio",
"option": "economy",
"label": "Economy",
"disabled": false,
"required": false
},
{
"name": "radio_17",
"value": false,
"type": "Radio",
"option": "business",
"label": "Business Class",
"disabled": false,
"required": false
},
{
"name": "radio_18",
"value": true,
"type": "Radio",
"option": "improbability",
"label": "Infinite Improbability",
"disabled": false,
"required": false
}
]
}
]
}
]
}
]
},
{
"cssClass": "md:col-span-2",
"type": "GridItem",
"colSpan": 1,
"rowSpan": 1,
"children": [
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"cssClass": "gap-4 grid-cols-2 h-32",
"type": "Grid",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Context Window"}]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-6 justify-center h-full",
"type": "Column",
"children": [
{
"cssClass": "items-center justify-between",
"type": "Row",
"children": [
{"content": "{{ ctx_tick % 20 * 3 + 20 }}% used", "type": "Text"},
{
"content": "{{ (ctx_tick % 20 * 3 + 20) * 2 }}k / 200k tokens",
"type": "Muted"
}
]
},
{
"type": "Tooltip",
"content": "Auto-compact buffer: 12%",
"delay": 0,
"children": [
{
"type": "Progress",
"value": "{{ ctx_tick % 20 * 3 + 20 }}",
"max": 100.0,
"variant": "{{ ctx_tick % 20 * 3 + 20 > 70 ? 'destructive' : (ctx_tick % 20 * 3 + 20 <= 33 ? 'success' : 'default') }}",
"size": "default"
}
]
}
]
}
]
}
]
},
{
"cssClass": "pb-0 gap-0",
"type": "Card",
"children": [
{
"type": "CardContent",
"children": [
{
"type": "Metric",
"label": "Fjords designed",
"value": "1,847",
"delta": "+3 coastlines"
}
]
},
{
"cssClass": "h-16",
"type": "Sparkline",
"data": [820, 950, 1100, 980, 1250, 1400, 1350, 1500, 1680, 1847],
"variant": "success",
"fill": true,
"curve": "linear",
"strokeWidth": 1.5
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Towel Incidents"}]
},
{
"type": "CardContent",
"children": [
{
"type": "BarChart",
"data": [
{"month": "Jan", "lost": 8, "found": 5},
{"month": "Feb", "lost": 24, "found": 15},
{"month": "Mar", "lost": 12, "found": 28},
{"month": "Apr", "lost": 35, "found": 19},
{"month": "May", "lost": 18, "found": 38},
{"month": "Jun", "lost": 42, "found": 30}
],
"series": [{"dataKey": "lost", "label": "Lost"}, {"dataKey": "found", "label": "Found"}],
"xAxis": "month",
"height": 200,
"stacked": false,
"horizontal": false,
"barRadius": 4,
"showLegend": true,
"showTooltip": true,
"animate": true,
"showGrid": true,
"showYAxis": true,
"valueFormat": "auto"
}
]
}
]
},
{
"cssClass": "gap-4 grid-cols-2",
"type": "Grid",
"children": [
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-2",
"type": "Column",
"children": [
{
"name": "checkbox_12",
"value": true,
"type": "Checkbox",
"label": "Towel packed",
"disabled": false,
"required": false
},
{
"name": "checkbox_13",
"value": true,
"type": "Checkbox",
"label": "Guide charged",
"disabled": false,
"required": false
},
{
"name": "checkbox_14",
"value": false,
"type": "Checkbox",
"label": "Babel fish inserted",
"disabled": false,
"required": false
}
]
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Marvin's Mood"}]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{"content": "How's life?", "type": "P"},
{
"cssClass": "gap-2",
"type": "Column",
"children": [
{
"type": "Button",
"label": "Meh",
"variant": "default",
"size": "default",
"disabled": false,
"onClick": {"action": "showToast", "message": "Noted. Enthusiasm levels nominal."}
},
{
"type": "Button",
"label": "Depressed",
"variant": "info",
"size": "default",
"disabled": false,
"onClick": {
"action": "showToast",
"message": "I think you ought to know I'm feeling very depressed."
}
},
{
"type": "Button",
"label": "Don't talk to me about life",
"variant": "warning",
"size": "default",
"disabled": false,
"onClick": {
"action": "showToast",
"message": "Brain the size of a planet and they ask me to pick up a piece of paper."
}
}
]
}
]
}
]
}
]
}
]
},
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-2 items-center",
"type": "Row",
"children": [
{"type": "Loader", "variant": "dots", "size": "sm"},
{"content": "Marvin is thinking...", "type": "Muted"}
]
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardContent",
"children": [
{
"type": "DataTable",
"columns": [
{"key": "crew", "header": "Crew", "sortable": true},
{"key": "species", "header": "Species", "sortable": true},
{"key": "towel", "header": "Towel?", "sortable": true},
{"key": "status", "header": "Status", "sortable": true}
],
"rows": [
{
"crew": "Arthur Dent",
"species": "Human",
"towel": "Yes",
"status": "Confused"
},
{
"crew": "Ford Prefect",
"species": "Betelgeusian",
"towel": "Always",
"status": "Drinking"
},
{
"crew": "Zaphod",
"species": "Betelgeusian",
"towel": "Lost it",
"status": "Presidential"
},
{"crew": "Trillian", "species": "Human", "towel": "Yes", "status": "Navigating"},
{
"crew": "Marvin",
"species": "Android",
"towel": "No point",
"status": "Depressed"
},
{
"crew": "Slartibartfast",
"species": "Magrathean",
"towel": "Somewhere",
"status": "Designing"
}
],
"search": true,
"paginated": false,
"pageSize": 10
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
},
"state": {
"improbability": 42,
"autoscale": true,
"code_mode": true,
"cache": false,
"radio_16": false,
"radio_17": false,
"radio_18": true,
"checkbox_12": true,
"checkbox_13": true,
"checkbox_14": false,
"ctx_tick": 0
}
}
```
```python Python expandable icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
"""The Hitchhiker's Guide dashboard from the Prefab welcome page.
Run with:
prefab serve examples/hitchhikers-guide/dashboard.py
prefab export examples/hitchhikers-guide/dashboard.py
"""
from prefab_ui import PrefabApp
from prefab_ui.actions import SetInterval, SetState, ShowToast
from prefab_ui.components import (
Alert,
AlertDescription,
AlertTitle,
Badge,
Button,
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
Carousel,
Checkbox,
Column,
Combobox,
ComboboxOption,
DataTable,
DataTableColumn,
DatePicker,
Dialog,
Grid,
GridItem,
HoverCard,
Loader,
Metric,
Muted,
P,
Progress,
Radio,
RadioGroup,
Ring,
Row,
Separator,
Slider,
Switch,
Text,
Tooltip,
)
from prefab_ui.components.charts import (
BarChart,
ChartSeries,
RadarChart,
Sparkline,
)
from prefab_ui.components.control_flow import Else, If
from prefab_ui.rx import Rx
ctx_tick = Rx("ctx_tick")
# Context window: climbs from 24% to ~78%, then resets
ctx_pct = (ctx_tick % 20) * 3 + 20
ctx_variant = (ctx_pct > 70).then(
"destructive", (ctx_pct <= 33).then("success", "default")
)
with PrefabApp(
title="Prefab Showcase",
state={"ctx_tick": 0, "improbability": 42},
on_mount=SetInterval(
400,
on_tick=SetState("ctx_tick", ctx_tick + 1),
),
) as app:
with Grid(columns={"default": 1, "md": 2, "lg": 4}, gap=4):
# ── Col 1 ─────────────────────────────────────────────────────────
with Column(gap=4):
with Card():
with CardHeader():
CardTitle("Register Towel")
CardDescription("The most important item in the galaxy")
with CardContent():
with Column(gap=3):
with Combobox(
placeholder="Type...",
search_placeholder="Search types...",
):
ComboboxOption("Bath", value="bath")
ComboboxOption("Beach", value="beach")
ComboboxOption("Interstellar", value="interstellar")
ComboboxOption("Microfiber", value="micro")
DatePicker(placeholder="Registration date")
with CardFooter():
with Row(gap=2):
with Dialog(
title="Towel Registered!",
description="Your towel has been added to the galactic registry.",
):
Button("Register")
Text("Don't forget to bring it.")
Button("Cancel", variant="outline")
with If("{{ !pressed }}"):
Button(
"This is probably the best button to press.",
variant="success",
on_click=SetState("pressed", True),
)
with Else():
Button(
"Please do not press this button again.",
variant="destructive",
on_click=SetState("pressed", False),
)
with Card():
with CardHeader():
CardTitle("Ship Status")
with CardContent():
with Column(gap=3):
with Row(
align="center",
css_class="justify-between",
):
Text("heart-of-gold")
with HoverCard(open_delay=0, close_delay=200):
Badge("In Orbit", variant="default")
with Column(gap=2):
Text("heart-of-gold")
Muted("Deployed 2h ago")
Progress(
value=100,
max=100,
variant="success",
)
Progress(
value=100,
max=100,
indicator_class="bg-yellow-400",
)
with Row(
align="center",
css_class="justify-between",
):
Text("vogon-poetry")
with Tooltip("64% — ETA 12 min", delay=0):
with Badge(variant="secondary"):
Loader(size="sm")
Text("Deploying")
Progress(value=64, max=100)
with Row(
align="center",
css_class="justify-between",
):
Text("deep-thought")
with Tooltip(
"Computing... 7.5 million years remaining",
delay=0,
):
with Badge(variant="outline"):
Loader(size="sm", variant="ios")
Text("Soon...")
Progress(value=12, max=100)
with Card():
with CardHeader():
CardTitle("Planet Ratings")
with CardContent():
RadarChart(
data=[
{"axis": "Views", "earth": 30, "mag": 95},
{"axis": "Fjords", "earth": 65, "mag": 100},
{"axis": "Pubs", "earth": 90, "mag": 10},
{"axis": "Mice", "earth": 40, "mag": 85},
{"axis": "Tea", "earth": 95, "mag": 15},
{"axis": "Safety", "earth": 45, "mag": 70},
],
series=[
ChartSeries(dataKey="earth", label="Earth"),
ChartSeries(dataKey="mag", label="Magrathea"),
],
axis_key="axis",
height=200,
show_legend=True,
show_tooltip=True,
)
# ── Col 2 ─────────────────────────────────────────────────────────
with Column(gap=4):
with Card():
with CardHeader():
CardTitle("Survival Odds")
with CardContent(css_class="w-fit mx-auto"):
Ring(
value=42,
label="42%",
variant="info",
size="lg",
thickness=12,
indicator_class="group-hover:drop-shadow-[0_0_24px_rgba(59,130,246,0.9)]",
)
with Card():
with CardHeader():
with Row(gap=2, align="center"):
CardTitle("Improbability Drive")
Loader(
variant="pulse",
size="sm",
css_class="text-blue-500",
)
with CardContent():
with Column(gap=2):
Slider(
min=0,
max=100,
value=42,
name="improbability",
)
with Row(
align="center",
css_class="justify-between",
):
Muted("Probable")
Muted("Infinite")
with Carousel(auto_advance=3000, show_controls=False, direction="up"):
with Alert(variant="success", icon="circle-check"):
AlertTitle("Don't Panic")
AlertDescription("Normality achieved.")
with Alert(variant="destructive", icon="triangle-alert"):
AlertTitle("Display Department")
AlertDescription("Beware of the leopard.")
with Card():
with CardHeader():
CardTitle("Prefect Horizon Config")
with CardContent():
with Column(gap=3):
Switch(
label="Auto-scale agents",
value=True,
name="autoscale",
)
Separator()
Switch(
label="Code Mode",
value=True,
name="code_mode",
)
Separator()
Switch(
label="Tool call caching",
value=False,
name="cache",
)
with CardFooter():
Button(
"Save Preferences",
on_click=ShowToast("Preferences saved!"),
)
with Card():
with CardHeader():
CardTitle("Travel Class")
with CardContent():
with RadioGroup(name="travel_class"):
Radio(option="economy", label="Economy")
Radio(option="business", label="Business Class")
Radio(
option="improbability",
label="Infinite Improbability",
value=True,
)
# ── Cols 3–4: summary row, chart, then 2-col grid below ─────────
with GridItem(css_class="md:col-span-2"):
with Column(gap=4):
with Grid(columns=2, gap=4, css_class="h-32"):
with Card():
with CardHeader():
CardTitle("Context Window")
with CardContent():
with Column(
gap=6,
justify="center",
css_class="h-full",
):
with Row(
align="center",
css_class="justify-between",
):
Text(f"{ctx_pct}% used")
Muted(f"{ctx_pct * 2}k / 200k tokens")
with Tooltip(
"Auto-compact buffer: 12%",
delay=0,
):
Progress(
value=ctx_pct,
max=100,
variant=ctx_variant,
)
with Card(css_class="pb-0 gap-0"):
with CardContent():
Metric(
label="Fjords designed",
value="1,847",
delta="+3 coastlines",
)
Sparkline(
data=[
820,
950,
1100,
980,
1250,
1400,
1350,
1500,
1680,
1847,
],
variant="success",
fill=True,
css_class="h-16",
)
with Card():
with CardHeader():
CardTitle("Towel Incidents")
with CardContent():
BarChart(
data=[
{"month": "Jan", "lost": 8, "found": 5},
{"month": "Feb", "lost": 24, "found": 15},
{"month": "Mar", "lost": 12, "found": 28},
{"month": "Apr", "lost": 35, "found": 19},
{"month": "May", "lost": 18, "found": 38},
{"month": "Jun", "lost": 42, "found": 30},
],
series=[
ChartSeries(dataKey="lost", label="Lost"),
ChartSeries(dataKey="found", label="Found"),
],
x_axis="month",
height=200,
bar_radius=4,
show_legend=True,
show_tooltip=True,
show_grid=True,
)
with Grid(columns=2, gap=4):
with Column(gap=4):
with Card():
with CardContent():
with Column(gap=2):
Checkbox(label="Towel packed", value=True)
Checkbox(label="Guide charged", value=True)
Checkbox(
label="Babel fish inserted",
value=False,
)
with Card():
with CardHeader():
CardTitle("Marvin's Mood")
with CardContent():
with Column(gap=3):
P("How's life?")
with Column(gap=2):
Button(
"Meh",
on_click=ShowToast(
"Noted. Enthusiasm levels nominal."
),
)
Button(
"Depressed",
variant="info",
on_click=ShowToast(
"I think you ought to "
"know I'm feeling very "
"depressed."
),
)
Button(
"Don't talk to me about life",
variant="warning",
on_click=ShowToast(
"Brain the size of a "
"planet and they ask me "
"to pick up a piece of "
"paper."
),
)
with Column(gap=4):
with Card():
with CardContent():
with Row(gap=2, align="center"):
Loader(variant="dots", size="sm")
Muted("Marvin is thinking...")
with Card():
with CardContent():
DataTable(
columns=[
DataTableColumn(
key="crew",
header="Crew",
sortable=True,
),
DataTableColumn(
key="species",
header="Species",
sortable=True,
),
DataTableColumn(
key="towel",
header="Towel?",
sortable=True,
),
DataTableColumn(
key="status",
header="Status",
sortable=True,
),
],
rows=[
{
"crew": "Arthur Dent",
"species": "Human",
"towel": "Yes",
"status": "Confused",
},
{
"crew": "Ford Prefect",
"species": "Betelgeusian",
"towel": "Always",
"status": "Drinking",
},
{
"crew": "Zaphod",
"species": "Betelgeusian",
"towel": "Lost it",
"status": "Presidential",
},
{
"crew": "Trillian",
"species": "Human",
"towel": "Yes",
"status": "Navigating",
},
{
"crew": "Marvin",
"species": "Android",
"towel": "No point",
"status": "Depressed",
},
{
"crew": "Slartibartfast",
"species": "Magrathean",
"towel": "Somewhere",
"status": "Designing",
},
],
search=True,
paginated=False,
)
```
```json Protocol icon="brackets-curly" expandable theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "pf-app-root",
"onMount": {
"action": "setInterval",
"duration": 400,
"onTick": {"action": "setState", "key": "ctx_tick", "value": "{{ ctx_tick + 1 }}"}
},
"type": "Div",
"children": [
{
"cssClass": "gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
"type": "Grid",
"children": [
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{"type": "CardTitle", "content": "Register Towel"},
{"type": "CardDescription", "content": "The most important item in the galaxy"}
]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{
"name": "combobox_12",
"type": "Combobox",
"placeholder": "Type...",
"searchPlaceholder": "Search types...",
"disabled": false,
"invalid": false,
"children": [
{"type": "ComboboxOption", "value": "bath", "label": "Bath", "disabled": false},
{
"type": "ComboboxOption",
"value": "beach",
"label": "Beach",
"disabled": false
},
{
"type": "ComboboxOption",
"value": "interstellar",
"label": "Interstellar",
"disabled": false
},
{
"type": "ComboboxOption",
"value": "micro",
"label": "Microfiber",
"disabled": false
}
]
},
{
"name": "datepicker_4",
"type": "DatePicker",
"placeholder": "Registration date"
}
]
}
]
},
{
"type": "CardFooter",
"children": [
{
"cssClass": "gap-2",
"type": "Row",
"children": [
{
"type": "Dialog",
"title": "Towel Registered!",
"description": "Your towel has been added to the galactic registry.",
"dismissible": true,
"children": [
{
"type": "Button",
"label": "Register",
"variant": "default",
"size": "default",
"disabled": false
},
{"content": "Don't forget to bring it.", "type": "Text"}
]
},
{
"type": "Button",
"label": "Cancel",
"variant": "outline",
"size": "default",
"disabled": false
}
]
}
]
}
]
},
{
"type": "Condition",
"cases": [
{
"when": "{{ !pressed }}",
"children": [
{
"type": "Button",
"label": "This is probably the best button to press.",
"variant": "success",
"size": "default",
"disabled": false,
"onClick": {"action": "setState", "key": "pressed", "value": true}
}
]
}
],
"else": [
{
"type": "Button",
"label": "Please do not press this button again.",
"variant": "destructive",
"size": "default",
"disabled": false,
"onClick": {"action": "setState", "key": "pressed", "value": false}
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Ship Status"}]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{
"cssClass": "items-center justify-between",
"type": "Row",
"children": [
{"content": "heart-of-gold", "type": "Text"},
{
"type": "HoverCard",
"openDelay": 0,
"closeDelay": 200,
"children": [
{"type": "Badge", "label": "In Orbit", "variant": "default"},
{
"cssClass": "gap-2",
"type": "Column",
"children": [
{"content": "heart-of-gold", "type": "Text"},
{"content": "Deployed 2h ago", "type": "Muted"},
{
"type": "Progress",
"value": 100.0,
"max": 100.0,
"variant": "success",
"size": "default"
}
]
}
]
}
]
},
{
"cssClass": "pf-progress-flat",
"type": "Progress",
"value": 100.0,
"max": 100.0,
"variant": "default",
"size": "default",
"indicatorClass": "bg-yellow-400"
},
{
"cssClass": "items-center justify-between",
"type": "Row",
"children": [
{"content": "vogon-poetry", "type": "Text"},
{
"type": "Tooltip",
"content": "64% \u2014 ETA 12 min",
"delay": 0,
"children": [
{
"type": "Badge",
"variant": "secondary",
"children": [
{"type": "Loader", "variant": "spin", "size": "sm"},
{"content": "Deploying", "type": "Text"}
]
}
]
}
]
},
{
"type": "Progress",
"value": 64.0,
"max": 100.0,
"variant": "default",
"size": "default"
},
{
"cssClass": "items-center justify-between",
"type": "Row",
"children": [
{"content": "deep-thought", "type": "Text"},
{
"type": "Tooltip",
"content": "Computing... 7.5 million years remaining",
"delay": 0,
"children": [
{
"type": "Badge",
"variant": "outline",
"children": [
{"type": "Loader", "variant": "ios", "size": "sm"},
{"content": "Soon...", "type": "Text"}
]
}
]
}
]
},
{
"type": "Progress",
"value": 12.0,
"max": 100.0,
"variant": "default",
"size": "default"
}
]
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Planet Ratings"}]
},
{
"type": "CardContent",
"children": [
{
"type": "RadarChart",
"data": [
{"axis": "Views", "earth": 30, "mag": 95},
{"axis": "Fjords", "earth": 65, "mag": 100},
{"axis": "Pubs", "earth": 90, "mag": 10},
{"axis": "Mice", "earth": 40, "mag": 85},
{"axis": "Tea", "earth": 95, "mag": 15},
{"axis": "Safety", "earth": 45, "mag": 70}
],
"series": [
{"dataKey": "earth", "label": "Earth"},
{"dataKey": "mag", "label": "Magrathea"}
],
"axisKey": "axis",
"height": 200,
"filled": true,
"showDots": false,
"showLegend": true,
"showTooltip": true,
"animate": true,
"showGrid": true
}
]
}
]
}
]
},
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Survival Odds"}]
},
{
"cssClass": "w-fit mx-auto",
"type": "CardContent",
"children": [
{
"type": "Ring",
"value": 42.0,
"min": 0,
"max": 100,
"label": "42%",
"variant": "info",
"size": "lg",
"thickness": 12.0,
"indicatorClass": "group-hover:drop-shadow-[0_0_24px_rgba(59,130,246,0.9)]"
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{
"cssClass": "gap-2 items-center",
"type": "Row",
"children": [
{"type": "CardTitle", "content": "Improbability Drive"},
{
"cssClass": "text-blue-500",
"type": "Loader",
"variant": "pulse",
"size": "sm"
}
]
}
]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-2",
"type": "Column",
"children": [
{
"name": "improbability",
"value": 42.0,
"type": "Slider",
"min": 0.0,
"max": 100.0,
"disabled": false,
"size": "default"
},
{
"cssClass": "items-center justify-between",
"type": "Row",
"children": [
{"content": "Probable", "type": "Muted"},
{"content": "Infinite", "type": "Muted"}
]
}
]
}
]
}
]
},
{
"type": "Carousel",
"visible": 1,
"gap": 16,
"direction": "up",
"loop": true,
"autoAdvance": 3000,
"continuous": false,
"speed": 2,
"effect": "slide",
"dimInactive": false,
"showControls": false,
"controlsPosition": "outside",
"showDots": false,
"pauseOnHover": true,
"align": "start",
"slidesToScroll": 1,
"drag": true,
"children": [
{
"type": "Alert",
"variant": "success",
"icon": "circle-check",
"children": [
{"type": "AlertTitle", "content": "Don't Panic"},
{"type": "AlertDescription", "content": "Normality achieved."}
]
},
{
"type": "Alert",
"variant": "destructive",
"icon": "triangle-alert",
"children": [
{"type": "AlertTitle", "content": "Display Department"},
{"type": "AlertDescription", "content": "Beware of the leopard."}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Prefect Horizon Config"}]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{
"name": "autoscale",
"value": true,
"type": "Switch",
"label": "Auto-scale agents",
"size": "default",
"disabled": false,
"required": false
},
{"type": "Separator", "orientation": "horizontal"},
{
"name": "code_mode",
"value": true,
"type": "Switch",
"label": "Code Mode",
"size": "default",
"disabled": false,
"required": false
},
{"type": "Separator", "orientation": "horizontal"},
{
"name": "cache",
"value": false,
"type": "Switch",
"label": "Tool call caching",
"size": "default",
"disabled": false,
"required": false
}
]
}
]
},
{
"type": "CardFooter",
"children": [
{
"type": "Button",
"label": "Save Preferences",
"variant": "default",
"size": "default",
"disabled": false,
"onClick": {"action": "showToast", "message": "Preferences saved!"}
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Travel Class"}]
},
{
"type": "CardContent",
"children": [
{
"name": "travel_class",
"type": "RadioGroup",
"children": [
{
"name": "radio_16",
"value": false,
"type": "Radio",
"option": "economy",
"label": "Economy",
"disabled": false,
"required": false
},
{
"name": "radio_17",
"value": false,
"type": "Radio",
"option": "business",
"label": "Business Class",
"disabled": false,
"required": false
},
{
"name": "radio_18",
"value": true,
"type": "Radio",
"option": "improbability",
"label": "Infinite Improbability",
"disabled": false,
"required": false
}
]
}
]
}
]
}
]
},
{
"cssClass": "md:col-span-2",
"type": "GridItem",
"colSpan": 1,
"rowSpan": 1,
"children": [
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"cssClass": "gap-4 grid-cols-2 h-32",
"type": "Grid",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Context Window"}]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-6 justify-center h-full",
"type": "Column",
"children": [
{
"cssClass": "items-center justify-between",
"type": "Row",
"children": [
{"content": "{{ ctx_tick % 20 * 3 + 20 }}% used", "type": "Text"},
{
"content": "{{ (ctx_tick % 20 * 3 + 20) * 2 }}k / 200k tokens",
"type": "Muted"
}
]
},
{
"type": "Tooltip",
"content": "Auto-compact buffer: 12%",
"delay": 0,
"children": [
{
"type": "Progress",
"value": "{{ ctx_tick % 20 * 3 + 20 }}",
"max": 100.0,
"variant": "{{ ctx_tick % 20 * 3 + 20 > 70 ? 'destructive' : (ctx_tick % 20 * 3 + 20 <= 33 ? 'success' : 'default') }}",
"size": "default"
}
]
}
]
}
]
}
]
},
{
"cssClass": "pb-0 gap-0",
"type": "Card",
"children": [
{
"type": "CardContent",
"children": [
{
"type": "Metric",
"label": "Fjords designed",
"value": "1,847",
"delta": "+3 coastlines"
}
]
},
{
"cssClass": "h-16",
"type": "Sparkline",
"data": [820, 950, 1100, 980, 1250, 1400, 1350, 1500, 1680, 1847],
"variant": "success",
"fill": true,
"curve": "linear",
"strokeWidth": 1.5
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Towel Incidents"}]
},
{
"type": "CardContent",
"children": [
{
"type": "BarChart",
"data": [
{"month": "Jan", "lost": 8, "found": 5},
{"month": "Feb", "lost": 24, "found": 15},
{"month": "Mar", "lost": 12, "found": 28},
{"month": "Apr", "lost": 35, "found": 19},
{"month": "May", "lost": 18, "found": 38},
{"month": "Jun", "lost": 42, "found": 30}
],
"series": [{"dataKey": "lost", "label": "Lost"}, {"dataKey": "found", "label": "Found"}],
"xAxis": "month",
"height": 200,
"stacked": false,
"horizontal": false,
"barRadius": 4,
"showLegend": true,
"showTooltip": true,
"animate": true,
"showGrid": true,
"showYAxis": true,
"valueFormat": "auto"
}
]
}
]
},
{
"cssClass": "gap-4 grid-cols-2",
"type": "Grid",
"children": [
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-2",
"type": "Column",
"children": [
{
"name": "checkbox_12",
"value": true,
"type": "Checkbox",
"label": "Towel packed",
"disabled": false,
"required": false
},
{
"name": "checkbox_13",
"value": true,
"type": "Checkbox",
"label": "Guide charged",
"disabled": false,
"required": false
},
{
"name": "checkbox_14",
"value": false,
"type": "Checkbox",
"label": "Babel fish inserted",
"disabled": false,
"required": false
}
]
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Marvin's Mood"}]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{"content": "How's life?", "type": "P"},
{
"cssClass": "gap-2",
"type": "Column",
"children": [
{
"type": "Button",
"label": "Meh",
"variant": "default",
"size": "default",
"disabled": false,
"onClick": {"action": "showToast", "message": "Noted. Enthusiasm levels nominal."}
},
{
"type": "Button",
"label": "Depressed",
"variant": "info",
"size": "default",
"disabled": false,
"onClick": {
"action": "showToast",
"message": "I think you ought to know I'm feeling very depressed."
}
},
{
"type": "Button",
"label": "Don't talk to me about life",
"variant": "warning",
"size": "default",
"disabled": false,
"onClick": {
"action": "showToast",
"message": "Brain the size of a planet and they ask me to pick up a piece of paper."
}
}
]
}
]
}
]
}
]
}
]
},
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-2 items-center",
"type": "Row",
"children": [
{"type": "Loader", "variant": "dots", "size": "sm"},
{"content": "Marvin is thinking...", "type": "Muted"}
]
}
]
}
]
},
{
"type": "Card",
"children": [
{
"type": "CardContent",
"children": [
{
"type": "DataTable",
"columns": [
{"key": "crew", "header": "Crew", "sortable": true},
{"key": "species", "header": "Species", "sortable": true},
{"key": "towel", "header": "Towel?", "sortable": true},
{"key": "status", "header": "Status", "sortable": true}
],
"rows": [
{
"crew": "Arthur Dent",
"species": "Human",
"towel": "Yes",
"status": "Confused"
},
{
"crew": "Ford Prefect",
"species": "Betelgeusian",
"towel": "Always",
"status": "Drinking"
},
{
"crew": "Zaphod",
"species": "Betelgeusian",
"towel": "Lost it",
"status": "Presidential"
},
{"crew": "Trillian", "species": "Human", "towel": "Yes", "status": "Navigating"},
{
"crew": "Marvin",
"species": "Android",
"towel": "No point",
"status": "Depressed"
},
{
"crew": "Slartibartfast",
"species": "Magrathean",
"towel": "Somewhere",
"status": "Designing"
}
],
"search": true,
"paginated": false,
"pageSize": 10
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
},
"state": {
"improbability": 42,
"autoscale": true,
"code_mode": true,
"cache": false,
"radio_16": false,
"radio_17": false,
"radio_18": true,
"checkbox_12": true,
"checkbox_13": true,
"checkbox_14": false,
"ctx_tick": 0
}
}
```
## Hello, world!
The "hello world" of Prefab is an interactive card. It looks like something you might see in any frontend framework... except, of course, that it's written entirely in Python. Context managers define the component hierarchy, and the reactive `Rx` class is used to bind the form input to client-side state. The heading and badge update in real time as you type because they reference the reactive variable.
Every example in the Prefab docs is rendered with Prefab itself. You'll see an interactive preview, along with the Python code that produced it, the corresponding Prefab protocol JSON, and a link to edit it live in the [Playground](/playground).
Try entering your name here:
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import *
from prefab_ui.rx import Rx
name = Rx("name").default("world")
with Card():
with CardContent():
with Column(gap=3):
H3(f"Hello, {name}!")
Muted("Type below and watch this update in real time.")
Input(name="name", placeholder="Your name...")
with CardFooter():
with Row(gap=2):
Badge(f"Name: {name}", variant="default")
Badge("Prefab", variant="success")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "Card",
"children": [
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{"content": "Hello, {{ name | default:world }}!", "type": "H3"},
{"content": "Type below and watch this update in real time.", "type": "Muted"},
{
"name": "name",
"type": "Input",
"inputType": "text",
"placeholder": "Your name...",
"disabled": false,
"readOnly": false,
"required": false
}
]
}
]
},
{
"type": "CardFooter",
"children": [
{
"cssClass": "gap-2",
"type": "Row",
"children": [
{
"type": "Badge",
"label": "Name: {{ name | default:world }}",
"variant": "default"
},
{"type": "Badge", "label": "Prefab", "variant": "success"}
]
}
]
}
]
}
}
```
## Why Prefab
Python developers building tools, APIs, and servers regularly need to ship interactive interfaces alongside their logic: dashboards, data tables, forms, charts. Building these interfaces has traditionally meant working in an entirely different language and ecosystem, or settling for static templates and limited tooling.
Prefab takes a different approach, using a Python DSL to naturally compose a library of production-ready components into interactive applications. The north star is composition, not construction: assembling existing components into interfaces, not authoring new ones in Python. The component tree compiles to a JSON protocol and is rendered by a bundled React frontend built on shadcn/ui. This means the interface definition stays in Python, right next to the data it presents. The output is declarative and serializable, which means UIs are safe for agents to generate, simple to validate, and portable across any transport.
Prefab is designed from the ground up for [MCP Apps](https://modelcontextprotocol.io/docs/extensions/apps), bringing interactive frontend capabilities to the Python MCP ecosystem for the first time. Prefab ships as a native part of [FastMCP](/running/fastmcp), supporting everything from hand-authored declarative interfaces to fully agent-generated UIs in a single framework.
Prefab's protocol-first approach was inspired by [FastUI](https://github.com/pydantic/FastUI), which pioneered declarative component protocols rendered by a separate frontend. Prefab brings that idea to the MCP ecosystem, with a renderer that ships as a self-contained static bundle and a DSL designed for both developers and agents.
## Installation
```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
pip install prefab-ui
```
Prefab requires Python 3.10+.
*Don't panic. Prefab is under very active development. Pin your version to avoid breaking changes.*
## What's in the Box
Install, create an app, see it render. Two minutes, no prerequisites.
100+ components: layout, typography, forms, data display, and interactive elements. Nest them with Python context managers.
Declarative interactivity — state updates, server calls, navigation, and toast notifications. Chain them with lifecycle callbacks.
Reactive state as Python expressions — arithmetic, comparisons, conditionals, and formatting pipes, no JavaScript required.
Prefab is made with 💙 by [Prefect](https://www.prefect.io/).