;
};
## Install
```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
pip install prefab-ui
```
Requires Python 3.10+.
## Create an app
Save this as `app.py`:
```python app.py theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.app import PrefabApp
from prefab_ui.components import Badge, Card, CardContent, CardFooter, Column, H3, Input, Muted, Row
from prefab_ui.rx import Rx
name = Rx("name").default("world")
with PrefabApp(css_class="max-w-md mx-auto") as app:
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")
```
## Run it
```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
prefab serve app.py --reload
```
Your browser opens to `http://127.0.0.1:5175`. The `--reload` flag watches your file for changes — every time you save `app.py`, the UI regenerates automatically. Here's what you'll see:
```python Python hidden icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.app import PrefabApp
from prefab_ui.components import Badge, Card, CardContent, CardFooter, Column, H3, Input, Muted, Row
from prefab_ui.rx import Rx
name = Rx("name").default("world")
with PrefabApp(css_class="max-w-md mx-auto") as app:
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": {
"cssClass": "pf-app-root max-w-md mx-auto",
"type": "Div",
"children": [
{
"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"}
]
}
]
}
]
}
]
}
}
```
Type in the input and watch the heading and badge update instantly. That's reactive state and a production component library, all from a dozen lines of Python.
Try editing `app.py` while the server is running. Change the heading text, swap a badge variant to `"destructive"`, or add another `Input` — save the file and the browser updates immediately. This is the development loop: write Python, save, see it live.
## What just happened
Prefab components nest using Python's `with` statement — `Card`, `Column`, `Input` compose into a tree that compiles to JSON, which a bundled React renderer turns into a live interface. The [Composition](/concepts/components) page walks through this in detail.
`Rx("name")` creates a reactive reference to a client-side state key. When used in an f-string like `f"Hello, {name}!"`, it compiles to `{{ name }}` in the protocol. Any component containing that reference re-renders whenever the value changes. The `Input(name="name")` automatically syncs its value to the same key, so typing in the input updates the heading and badge instantly — no server round-trip needed. Read more about [reactive expressions](/concepts/expressions).
Prefab has a full set of client-side [actions](/concepts/actions) (`SetState`, `ShowToast`, `ToggleState`, `OpenLink`), plus server actions like `CallTool` for when you need a backend.
## Where to go from here
* [**Composition**](/concepts/components) — learn how to build any interface by nesting components
* [**Playground**](/playground) — browse all 100+ components interactively
* [**Reactive Expressions**](/concepts/expressions) — operators, conditionals, and pipes for client-side logic
* [**API Server**](/running/api) and [**FastMCP**](/running/fastmcp) — wire up a backend when you need server logic