Prefab

https://prefab.prefect.io/docs
Admin
Prefab is a UI framework for building rich, interactive interfaces in Python with 100+ prebuilt...
Tokens:388,209
Snippets:2,415
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Run the Hitchhiker's Guide example app

Source: https://prefab.prefect.io/docs/running/api

Starts the example API server with uvicorn, enabling live reload. The app is located in the examples/hitchhikers-guide directory.

```bash
uvicorn examples.hitchhikers_guide.api_server:app --reload

```

--------------------------------

### Run the Hitchhiker's Guide MCP server with uv

Source: https://prefab.prefect.io/docs/running/fastmcp

Use this command to start the MCP server from the examples/hitchhikers-guide directory. The server is a complete working example with search, dialog-based entry creation, inline deletion, and error handling.

```bash
uv run examples/hitchhikers-guide/mcp_server.py

```

--------------------------------

### Hitchhiker's Guide Dashboard Example

Source: https://prefab.prefect.io/docs

A complete Prefab dashboard example from the welcome page, showcasing a wide range of components (cards, combobox, date picker, buttons, dialogs, conditional rendering) and reactive state management. Run with 'prefab serve examples/hitchhikers-guide/dashboard.py' or 'prefab export examples/hitchhikers-guide/dashboard.py'.

```python
"""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),
                )
```

--------------------------------

### Install Prefab with uv

Source: https://prefab.prefect.io/docs/getting-started/installation

Recommended installation method using uv. Adds prefab-ui as a dependency to your project.

```bash
uv add prefab-ui

```

--------------------------------

### Install Prefab with pip

Source: https://prefab.prefect.io/docs/getting-started/installation

Alternative installation method using pip. Requires Python 3.10+.

```bash
pip install prefab-ui

```

--------------------------------

### Verify Prefab Installation

Source: https://prefab.prefect.io/docs/getting-started/installation

Runs the prefab CLI to confirm the installation is working.

```bash
prefab version

```

--------------------------------

### Default theme view example

Source: https://prefab.prefect.io/docs/styling/themes

Example of a PrefabApp view using the default theme with metrics and progress bars.

```python
from prefab_ui.app import PrefabApp
from prefab_ui.components import Card, CardContent, Metric, Grid, Column, Progress, CardHeader, CardTitle

with Column() as view:
    with Grid(columns=3):
        with Card():
            with CardContent():
                Metric(label="Revenue", value="$1.2M", delta="+12%")
        with Card():
            with CardContent():
                Metric(label="Users", value="8,420", delta="-4.3%")
        with Card():
            with CardContent():
                Metric(label="Uptime", value="99.9%", delta="+0.1%")
    with Card():
        with CardHeader():
            CardTitle("Pipeline")
        with CardContent():
            with Column(gap=2):
                Progress(value=92, variant="success", label="Builds")
                Progress(value=67, variant="default", label="Deploy")
                Progress(value=34, variant="warning", label="Tests")

PrefabApp(view=view)

```

```json
{
  "view": {
    "cssClass": "pf-app-root",
    "type": "Div",
    "children": [
      {
        "type": "Column",
        "children": [
          {
            "cssClass": "grid-cols-3",
            "type": "Grid",
            "children": [
              {
                "type": "Card",
                "children": [
                  {
                    "type": "CardContent",
                    "children": [{"type": "Metric", "label": "Revenue", "value": "$1.2M", "delta": "+12%"}]
                  }
                ]
              },
              {
                "type": "Card",
                "children": [
                  {
                    "type": "CardContent",
                    "children": [{"type": "Metric", "label": "Users", "value": "8,420", "delta": "-4.3%"}]
                  }
                ]
              },
              {
                "type": "Card",
                "children": [
                  {
                    "type": "CardContent",
                    "children": [{"type": "Metric", "label": "Uptime", "value": "99.9%", "delta": "+0.1%"}]
                  }
                ]
              }
            ]
          },
          {
            "type": "Card",
            "children": [
              {
                "type": "CardHeader",
                "children": [{"type": "CardTitle", "content": "Pipeline"}]
              },
              {
                "type": "CardContent",
                "children": [
                  {
                    "cssClass": "gap-2",
                    "type": "Column",
                    "children": [
                      {"type": "Progress", "value": 92.0, "variant": "success", "size": "default"},
                      {"type": "Progress", "value": 67.0, "variant": "default", "size": "default"},
                      {"type": "Progress", "value": 34.0, "variant": "warning", "size": "default"}
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

```

--------------------------------

### Python example using Presentation theme

Source: https://prefab.prefect.io/docs/styling/themes

Shows how to create a PrefabApp with the Presentation theme, including a Card with a DataTable of service health metrics. The example uses Progress and Badge components with variants to indicate status.

```python
from prefab_ui.app import PrefabApp
from prefab_ui.themes import Presentation
from prefab_ui.components import Card, CardHeader, CardContent, Muted, Badge, DataTable, DataTableColumn, Progress, H2

rows = [
    {"name": "API Requests",   "current": "2,531/s",  "target": "3,900/s",  "gauge": Progress(value=65),              "status": Badge("65%")},
    {"name": "Latency P99",    "current": "38ms",      "target": "52ms",     "gauge": Progress(value=73, variant="success"),  "status": Badge("73%", variant="success")},
    {"name": "Error Rate",     "current": "0.4%",      "target": "0.5%",     "gauge": Progress(value=80, variant="success"),  "status": Badge("80%", variant="success")},
    {"name": "Cache Hit",      "current": "91%",       "target": "95%",      "gauge": Progress(value=96, variant="warning"), "status": Badge("96%", variant="warning")},
]

with Card() as view:
    with CardHeader():
        Muted("Week of Mar 9, 2026")
        H2("Service Health vs Target", bold=True)
    with CardContent():
        DataTable(
            columns=[
                DataTableColumn(key="name", header="Metric"),
                DataTableColumn(key="current", header="Current", align="right"),
                DataTableColumn(key="target", header="Target", align="right"),
                DataTableColumn(key="gauge", header="vs Target", width="180px"),
                DataTableColumn(key="status", header=""),
            ],
            rows=rows,
        )

PrefabApp(view=view, theme=Presentation())

```

--------------------------------

### Instant Tooltips Example

Source: https://prefab.prefect.io/docs/components/tooltip

Example usage of the Tooltip component with delay=0 for immediate feedback in dashboards or status displays.

```APIDOC
## Instant Tooltips

### Description
By default, tooltips wait 700ms before appearing. Set `delay=0` for immediate feedback — useful in dashboards or status displays where users are scanning quickly.

### Example
```python
from prefab_ui.components import Badge, Row, Tooltip

with Row(gap=4):
    with Tooltip("Deployed 2h ago", delay=0):
        Badge("In Orbit")
    with Tooltip("64% — ETA 12 min", delay=0):
        Badge("Deploying", variant="secondary")
    with Tooltip("Position 3 of 8", delay=0):
        Badge("Queued", variant="outline")
```

### JSON Representation
```json
{
  "view": {
    "cssClass": "gap-4",
    "type": "Row",
    "children": [
      {
        "type": "Tooltip",
        "content": "Deployed 2h ago",
        "delay": 0,
        "children": [{"type": "Badge", "label": "In Orbit", "variant": "default"}]
      },
      {
        "type": "Tooltip",
        "content": "64% \u2014 ETA 12 min",
        "delay": 0,
        "children": [{"type": "Badge", "label": "Deploying", "variant": "secondary"}]
      },
      {
        "type": "Tooltip",
        "content": "Position 3 of 8",
        "delay": 0,
        "children": [{"type": "Badge", "label": "Queued", "variant": "outline"}]
      }
    ]
  }
}
```
```

--------------------------------

### Sandbox cold start and warm calls

Source: https://prefab.prefect.io/docs/concepts/generative-ui

Shows the performance characteristics of the Sandbox: the first call incurs a ~2 second cold start while Pyodide boots, while subsequent calls execute in about 1 millisecond because the process stays warm.

```python
sandbox = Sandbox()

# First call: ~2s (cold start)
result = await sandbox.run(code)

# All subsequent calls: ~1ms
result = await sandbox.run(more_code)

```

--------------------------------

### Dot sizes example (JSON view)

Source: https://prefab.prefect.io/docs/components/dot

JSON view model for the sizes example, showing the structure with Dot components and their size properties (sm, default, lg).

```json
{
  "view": {
    "cssClass": "gap-6 items-center",
    "type": "Row",
    "children": [
      {
        "cssClass": "gap-2 items-center",
        "type": "Row",
        "children": [
          {"type": "Dot", "variant": "success", "size": "sm", "shape": "circle"},
          {"content": "Small", "type": "Text"}
        ]
      },
      {
        "cssClass": "gap-2 items-center",
        "type": "Row",
        "children": [
          {"type": "Dot", "variant": "success", "size": "default", "shape": "circle"},
          {"content": "Default", "type": "Text"}
        ]
      },
      {
        "cssClass": "gap-2 items-center",
        "type": "Row",
        "children": [
          {"type": "Dot", "variant": "success", "size": "lg", "shape": "circle"},
          {"content": "Large", "type": "Text"}
        ]
      }
    ]
  }
}
```

--------------------------------

### SelectOption

Source: https://prefab.prefect.io/docs/components/select

Documentation for the SelectOption component, including its properties and an example.

```APIDOC
## SelectOption

### Description
An individual option within a select component. It requires a value and a label, and can be selected or disabled.

### Properties
- **type** (string) - Required - Must be "SelectOption".
- **id** (string) - Optional - Unique identifier for the component.
- **onMount** (any) - Optional - Callback or action triggered when the component is mounted.
- **value** (string) - Required - The value associated with the option.
- **label** (string) - Required - The display text for the option.
- **selected** (boolean) - Optional - Whether the option is selected. Default: false.
- **disabled** (boolean) - Optional - Whether the option is disabled. Default: false.
- **cssClass** (string) - Optional - CSS class for styling.

### Example
```json
{
  "type": "SelectOption",
  "id": "option-1",
  "value": "US",
  "label": "United States",
  "selected": false,
  "disabled": false,
  "cssClass": "my-option"
}
```
```

--------------------------------

### Select

Source: https://prefab.prefect.io/docs/components/select

Documentation for the Select component, including its properties and an example.

```APIDOC
## Select

### Description
A select component that allows users to choose from a list of options. It supports various properties for customization, including size, side, alignment, and validation states.

### Properties
- **type** (string) - Required - Must be "Select".
- **id** (string) - Optional - Unique identifier for the component.
- **onMount** (any) - Optional - Callback or action triggered when the component is mounted.
- **children** ([Component]) - Optional - Child components to render inside the select.
- **let** (object) - Optional - Object to bind variables for use in child components.
- **name** (string) - Optional - Name attribute for the select element.
- **value** (string) - Optional - Current value of the select.
- **placeholder** (string) - Optional - Placeholder text shown when no value is selected.
- **size** (sm | default) - Optional - Size of the select component.
- **side** (top | right | bottom | left) - Optional - Side on which the dropdown appears.
- **align** (start | center | end) - Optional - Alignment of the dropdown relative to the trigger.
- **disabled** (boolean) - Optional - Whether the select is disabled. Default: false.
- **required** (boolean) - Optional - Whether the select is required. Default: false.
- **invalid** (boolean) - Optional - Whether the select is in an invalid state. Default: false.
- **onChange** (Action | Action[]) - Optional - Action or array of actions triggered when the value changes.
- **cssClass** (string) - Optional - CSS class for styling.

### Example
```json
{
  "type": "Select",
  "id": "my-select",
  "name": "country",
  "value": "US",
  "placeholder": "Select a country",
  "size": "default",
  "side": "bottom",
  "align": "start",
  "disabled": false,
  "required": false,
  "invalid": false,
  "onChange": { "type": "Action", "name": "handleChange" },
  "cssClass": "my-select"
}
```
```

--------------------------------

### Row justify="start"

Source: https://prefab.prefect.io/docs/components/row

Example of using Row with justify="start" to align children to the start of the horizontal axis.

```APIDOC
## Row justify="start"

### Description
Creates a Row component with justify="start" to distribute children along the horizontal axis starting from the left.

### Usage
```python
from prefab_ui.components import Div, Row

with Row(gap=1, justify="start", css_class="w-full p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```

### Parameters
- **gap** (int) - Required - Spacing between children.
- **justify** (string) - Required - Distribution along horizontal axis. Value: "start".
- **css_class** (string) - Optional - CSS classes for styling.

### Output JSON
```json
{
  "view": {
    "cssClass": "gap-1 justify-start w-full p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
```

--------------------------------

### Row justify="start" example

Source: https://prefab.prefect.io/docs/components/row

Shows the Row component with justify="start" to align children to the left. The JSON view shows the resulting cssClass includes 'justify-start'.

```python
from prefab_ui.components import Div, Row

with Row(gap=1, justify="start", css_class="w-full p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")

```

```json
{
  "view": {
    "cssClass": "gap-1 justify-start w-full p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}

```

--------------------------------

### Row align="start" example

Source: https://prefab.prefect.io/docs/components/row

Shows the Row component with align="start" to align children to the top. The JSON view shows the resulting cssClass "items-start".

```python
from prefab_ui.components import Div, Row

with Row(gap=4, align="start", css_class="p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-8 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-16 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")

```

```json
{
  "view": {
    "cssClass": "gap-4 items-start p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-8 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-16 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}

```

--------------------------------

### Reading the Value

Source: https://prefab.prefect.io/docs/components/checkbox

Example of using `.rx` to get a reactive reference to the checkbox’s boolean state and converting it to display strings.

```APIDOC
## Reading the Value

### Description
Use `.rx` to get a reactive reference to the checkbox’s boolean state. The `.then()` pipe converts `true`/`false` into display-friendly strings.

### Example
```python
from prefab_ui.components import Checkbox, Input, Label, Row

with Row(gap=4, align="center"):
    cb = Checkbox(label="Enable Infinite Improbability Drive", value=True)
    Label("Drive status:")
    Input(value=cb.rx.then("Engaged", "Disengaged"), read_only=True)
```

### Generated View
```json
{
  "view": {
    "cssClass": "gap-4 items-center",
    "type": "Row",
    "children": [
      {
        "name": "checkbox_9",
        "value": true,
        "type": "Checkbox",
        "label": "Enable Infinite Improbability Drive",
        "disabled": false,
        "required": false
      },
      {"type": "Label", "text": "Drive status:", "optional": false},
      {
        "name": "input_2",
        "value": "{{ checkbox_9 ? 'Engaged' : 'Disengaged' }}",
        "type": "Input",
        "inputType": "text",
        "disabled": false,
        "readOnly": true,
        "required": false
      }
    ]
  },
  "state": {"checkbox_9": true}
}
```

Toggle the checkbox and the input updates to reflect the current state.
```

--------------------------------

### Run the app with prefab serve

Source: https://prefab.prefect.io/docs/getting-started/quickstart

Starts the development server. The --reload flag watches app.py for changes and regenerates the UI automatically. The browser opens to http://127.0.0.1:5175.

```bash
prefab serve app.py --reload

```

--------------------------------

### Envelope JSON example

Source: https://prefab.prefect.io/docs/protocol/overview

Shows the top-level structure of a UIResponse envelope with version, view, defs, and state keys. State keys must not start with '$'.

```json
{
  "version": "0.2",
  "view": { ... },
  "defs": { ... },
  "state": {
    "count": 42,
    "name": "Alice"
  }
}
```

--------------------------------

### Basic Combobox with ComboboxOption children

Source: https://prefab.prefect.io/docs/components/combobox

Creates a searchable dropdown with a placeholder and five options. The label is passed as a positional argument; the value is what gets stored in state when selected. The example sets a CSS class to center the widget.

```python
from prefab_ui.components import Combobox, ComboboxOption

with Combobox(placeholder="Search planets...", css_class="w-fit mx-auto"):
    ComboboxOption("Magrathea", value="magrathea")
    ComboboxOption("Betelgeuse V", value="betelgeuse")
    ComboboxOption("Vogsphere", value="vogsphere")
    ComboboxOption("Krikkit", value="krikkit")
    ComboboxOption("Earth", value="earth")

```

```json
{
  "view": {
    "cssClass": "w-fit mx-auto",
    "name": "combobox_1",
    "type": "Combobox",
    "placeholder": "Search planets...",
    "disabled": false,
    "invalid": false,
    "children": [
      {
        "type": "ComboboxOption",
        "value": "magrathea",
        "label": "Magrathea"
      },
      {
        "type": "ComboboxOption",
        "value": "betelgeuse",
        "label": "Betelgeuse V"
      },
      {
        "type": "ComboboxOption",
        "value": "vogsphere",
        "label": "Vogsphere"
      },
      {
        "type": 
```

--------------------------------

### Define a PrefabApp in app.py

Source: https://prefab.prefect.io/docs/serve

Defines a PrefabApp with initial state and CSS class, then adds Heading and Text components. Save this as app.py and serve it with `prefab serve app.py` to preview the UI locally.

```python
from prefab_ui.app import PrefabApp
from prefab_ui.components import Heading, Text

with PrefabApp(state={"greeting": "Hello"}, css_class="p-6") as app:
    Heading("Hello Prefab")
    Text("This is a local preview.")

```

--------------------------------

### Custom Range Progress with Labels

Source: https://prefab.prefect.io/docs/components/progress

Sets a custom range with `max` for step-style counting (3 of 5 steps) and both `min` and `max` for a range that doesn't start at zero (Temperature: 72°F, range 60–100). The renderer normalizes the value to a percentage automatically. Uses the warning variant for the temperature example.

```python
from prefab_ui.components import Column, Label, Progress

with Column(gap=4):
    with Column(gap=2):
        Label("3 of 5 steps")
        Progress(value=3, max=5)
    with Column(gap=2):
        Label("Temperature: 72°F (range 60–100)")
        Progress(value=72, min=60, max=100, variant="warning")

```

```json
{
  "view": {
    "cssClass": "gap-4",
    "type": "Column",
    "children": [
      {
        "cssClass": "gap-2",
        "type": "Column",
        "children": [
          {
            
```

--------------------------------

### Create a reactive app in app.py

Source: https://prefab.prefect.io/docs/getting-started/quickstart

Save this as app.py. It creates a PrefabApp with a Card, reactive name state, and an Input that updates the heading and badge in real time.

```python
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")

```

--------------------------------

### Loader Sizes Example (Python)

Source: https://prefab.prefect.io/docs/components/loader

Shows all three sizes (sm, default, lg) of the Loader in a Row with a gap of 4 and centered alignment.

```python
from prefab_ui.components import Row, Loader

with Row(gap=4, css_class="items-center"):
    Loader(size="sm")
    Loader(size="default")
    Loader(size="lg")

```

--------------------------------

### Serve a PrefabApp with prefab serve

Source: https://prefab.prefect.io/docs/serve

Serves the PrefabApp defined in app.py and opens the browser to http://127.0.0.1:5175. Client-side behavior works, but CallTool is unavailable without an MCP server.

```bash
prefab serve app.py

```

--------------------------------

### Minimal theme example

Source: https://prefab.prefect.io/docs/styling/themes

Strips all renderer defaults: no card padding, no automatic gaps, no gradient fills. You control every detail. Use the Minimal theme in PrefabApp.

```python
from prefab_ui.app import PrefabApp
from prefab_ui.themes import Minimal
from prefab_ui.components import Column, Row, H2, Muted, Progress, Badge

with Column(gap=4) as view:
    H2("System Status")
    Muted("Last checked 2 minutes ago")
    with Column(gap=2):
        Progress(value=92, variant="success", label="API")
        Progress(value=67, label="Workers")
        Progress(value=34, variant="warning", label="Queue")
    with Row(gap=2):
        Badge("3 healthy", variant="success")
        Badge("1 degraded", variant="warning")

PrefabApp(view=view, theme=Minimal())
```

--------------------------------

### Define main() to control playground render target

Source: https://prefab.prefect.io/docs/playground

Use main() to explicitly return a PrefabApp for rendering. This takes priority over any other components or apps created. The example creates a Column with a Heading and wraps it in a PrefabApp with a Presentation theme using a cyan accent.

```python
from prefab_ui.app import PrefabApp
from prefab_ui.themes import Presentation
from prefab_ui.components import Column, Heading

def main():
    with Column() as view:
        Heading("Dashboard")
    return PrefabApp(view=view, theme=Presentation(accent="cyan"))

```

--------------------------------

### Python wizard flow with Pages and SetState

Source: https://prefab.prefect.io/docs/components/pages

Builds a three-step wizard (Setup, Review, Complete) using Pages and SetState. Use `as pages` to capture the Pages reference and pass it to SetState instead of hardcoding the state key. The current step is displayed via `pages.rx`.

```python
from prefab_ui.components import Button, Column, Page, Pages, Row, Text
from prefab_ui.actions import SetState

with Column(gap=4):
    with Pages(value="setup") as pages:
        with Page("Setup", value="setup"):
            with Column(gap=4):
                Text("Configure your settings.")
                with Row():
                    Button("Next", on_click=SetState(pages, "review"))
        with Page("Review", value="review"):
            with Column(gap=4):
                Text("Review your choices.")
                with Row(gap=2):
                    Button("Back", variant="outline", on_click=SetState(pages, "setup"))
                    Button("Next", on_click=SetState(pages, "complete"))
        with Page("Complete", value="complete"):
            Text("All done!")
    Text(f"Current step: {pages.rx}", css_class="text-muted-foreground text-sm")
```

--------------------------------

### GET with query params

Source: https://prefab.prefect.io/docs/actions/fetch

Use Fetch.get to perform a GET request with query parameters. The params dictionary can contain Rx reactive values.

```python
from prefab_ui.rx import Rx

query = Rx("query")
Fetch.get("/api/search", params={"q": query, "page": "1"})

```

--------------------------------

### Linked Sliders Example

Source: https://prefab.prefect.io/docs/concepts/custom-handlers

Complete example of three sliders constrained to sum to 100%, using a client-side JavaScript handler to redistribute values proportionally.

```python
from prefab_ui.app import PrefabApp
from prefab_ui.actions import CallHandler
from prefab_ui.components import Card, CardContent, Column, Row, Slider, Text

js_actions = {
    "constrain": """(ctx) => {
        const keys = ['infra', 'people', 'tools'];
        const changed = ctx.arguments.key;
        const newVal = ctx.event;
        const others = keys.filter(k => k !== changed);
        const remaining = 100 - newVal;
        const otherTotal = others.reduce((s, k) => s + ctx.state[k], 0);
        const updates = {};
        for (const k of others) {
            updates[k] = otherTotal > 0
                ? Math.round((ctx.state[k] / otherTotal) * remaining)
                : Math.round(remaining / others.length);
        }
        return updates;
    }""",
}

with PrefabApp(js_actions=js_actions) as app:
    with Card():
        with CardContent():
            with Column(gap=4):
                for label, key in [
                    ("Infrastructure", "infra"),
                    ("People", "people"),
                    ("Tools", "tools"),
                ]:
                    with Column(gap=1):
                        with Row(css_class="justify-between"):
                            Text(label)
                            Text(f"{{{{ {key} | round }}}}%", bold=True)
                        Slider(
                            name=key, max=100, step=1,
                            on_change=CallHandler(
                                "constrain",
                                arguments={"key": key},
                            ),
                        )

                with Row(css_class="justify-between pt-4 border-t"):
                    Text("Total", bold=True)
                    Text("{{ infra + people + tools | round }}%", bold=True)
```

--------------------------------

### Ring indicator_class example (JSON view)

Source: https://prefab.prefect.io/docs/components/ring

JSON representation of the indicator_class example, showing the view structure with two Ring children and their indicatorClass values.

```json
{
  "view": {
    "cssClass": "gap-6",
    "type": "Row",
    "children": [
      {
        "type": "Ring",
        "value": 72.0,
        "min": 0,
        "max": 100,
        "label": "72%",
        "variant": "info",
        "size": "default",
        "thickness": 6,
        "indicatorClass": "group-hover:drop-shadow-[0_0_20px_rgba(59,130,246,0.8)]"
      },
      {
        "type": "Ring",
        "value": 90.0,
        "min": 0,
        "max": 100,
        "label": "90%",
        "variant": "default",
        "size": "default",
        "thickness": 6,
        "indicatorClass": "stroke-emerald-500 group-hover:drop-shadow-[0_0_20px_rgba(16,185,129,0.8)]"
      }
    ]
  }
}
```

--------------------------------

### Loader with Text Example (Python)

Source: https://prefab.prefect.io/docs/components/loader

Pairs a small loader with text to describe what's happening, using a Row with gap 2 and centered alignment.

```python
from prefab_ui.components import Row, Loader, Text

with Row(gap=2, css_class="items-center"):
    Loader(size="sm")
    Text("Fetching results...")

```

--------------------------------

### Define a PrefabApp in app.py

Source: https://prefab.prefect.io/docs/export

Example Python file defining a PrefabApp with state and components. This is the input for the `prefab export` command.

```python
from prefab_ui.app import PrefabApp
from prefab_ui.components import Heading, Text

with PrefabApp(state={"greeting": "Hello"}, css_class="p-6") as app:
    Heading("Hello Prefab")
    Text("This is a static export.")

```

--------------------------------

### Vertical Orientation Slider Example (JSON)

Source: https://prefab.prefect.io/docs/components/slider

JSON representation of the vertical slider example, showing the view tree and state for three sliders with orientation set to vertical.

```json
{
  "view": {
    "cssClass": "gap-8 h-48 items-center justify-center",
    "type": "Row",
    "children": [
      {
        "name": "slider_18",
        "value": 75.0,
        "type": "Slider",
        "min": 0,
        "max": 100,
        "disabled": false,
        "size": "default",
        "orientation": "vertical"
      },
      {
        "name": "slider_19",
        "value": 50.0,
        "type": "Slider",
        "min": 0,
        "max": 100,
        "disabled": false,
        "variant": "success",
        "size": "default",
        "orientation": "vertical"
      },
      {
        "name": "slider_20",
        "value": 25.0,
        "type": "Slider",
        "min": 0,
        "max": 100,
        "disabled": false,
        "variant": "info",
        "size": "default",
        "orientation": "vertical"
      }
    ]
  },
  "state": {"slider_18": 75.0, "slider_19": 50.0, "slider_20": 25.0}
}
```

--------------------------------

### Ring thickness prop example (JSON view)

Source: https://prefab.prefect.io/docs/components/ring

JSON representation of the Ring thickness example, showing the view structure with three Ring children and their thickness values.

```json
{
  "view": {
    "cssClass": "gap-6 items-end",
    "type": "Row",
    "children": [
      {
        "type": "Ring",
        "value": 75.0,
        "min": 0,
        "max": 100,
        "label": "3",
        "variant": "default",
        "size": "default",
        "thickness": 3.0
      },
      {
        "type": "Ring",
        "value": 75.0,
        "min": 0,
        "max": 100,
        "label": "6",
        "variant": "default",
        "size": "default",
        "thickness": 6.0
      },
      {
        "type": "Ring",
        "value": 75.0,
        "min": 0,
        "max": 100,
        "label": "12",
        "variant": "default",
        "size": "default",
        "thickness": 12.0
      }
    ]
  }
}
```

--------------------------------

### Import EVENT from prefab_ui.rx

Source: https://prefab.prefect.io/docs/reactive/event

Import the EVENT reactive reference from prefab_ui.rx.

```python
from prefab_ui.rx import EVENT

```

--------------------------------

### Basic Label Usage

Source: https://prefab.prefect.io/docs/components/label

Creates a Label component with text content. The Python example shows the component API, and the JSON example shows the corresponding view model.

```python
from prefab_ui.components import Label

Label("Email address")
```

```json
{"view": {"type": "Label", "text": "Email address", "optional": false}}
```

--------------------------------

### Create PrefabApp with context manager

Source: https://prefab.prefect.io/docs/reference/app

Use the context manager to build an app with an implicit root Column. State, theme, and styling are declared upfront. The root Column gets a 'pf-app-root' CSS class.

```python
from prefab_ui.app import PrefabApp
from prefab_ui.components import Heading, Slider, Text
from prefab_ui.themes import Presentation

with PrefabApp(state={"volume": 75}, theme=Presentation(accent="blue")) as app:
    Heading("Dashboard")
    slider = Slider(value=75, name="volume")
    Text(f"Volume: {slider.rx}%")
```

--------------------------------

### Dot shapes example (JSON view)

Source: https://prefab.prefect.io/docs/components/dot

JSON view model for the shapes example, showing the structure with Dot components and their shape properties (circle, square, rounded).

```json
{
  "view": {
    "cssClass": "gap-6 items-center",
    "type": "Row",
    "children": [
      {
        "cssClass": "gap-2 items-center",
        "type": "Row",
        "children": [
          {"type": "Dot", "variant": "info", "size": "default", "shape": "circle"},
          {"content": "Circle", "type": "Text"}
        ]
      },
      {
        "cssClass": "gap-2 items-center",
        "type": "Row",
        "children": [
          {"type": "Dot", "variant": "info", "size": "default", "shape": "square"},
          {"content": "Square", "type": "Text"}
        ]
      },
      {
        "cssClass": "gap-2 items-center",
        "type": "Row",
        "children": [
          {"type": "Dot", "variant": "info", "size": "default", "shape": "rounded"},
          {"content": "Rounded", "type": "Text"}
        ]
      }
    ]
  }
}
```

--------------------------------

### Export a PrefabApp with `prefab export`

Source: https://prefab.prefect.io/docs/export

Command to export the app defined in app.py. Writes app.html to the current directory.

```bash
prefab export app.py

```

--------------------------------

### Handle Styles Example (JSON)

Source: https://prefab.prefect.io/docs/components/slider

JSON representation of the handle styles example, showing the view tree and state for two sliders, one with handleStyle set to "bar".

```json
{
  "view": {
    "cssClass": "gap-4",
    "type": "Column",
    "children": [
      {
        "cssClass": "gap-2",
        "type": "Column",
        "children": [
          {"type": "Label", "text": "Circle (default)", "optional": false},
          {
            "name": "slider_21",
            "value": 50.0,
            "type": "Slider",
            "min": 0,
            "max": 100,
            "disabled": false,
            "size": "default"
          }
        ]
      },
      {
        "cssClass": "gap-2",
        "type": "Column",
        "children": [
          {"type": "Label", "text": "Bar", "optional": false},
          {
            "name": "slider_22",
            "value": 50.0,
            "type": "Slider",
            "min": 0,
            "max": 100,
            "disabled": false,
            "size": "default",
            "handleStyle": "bar"
          }
        ]
      }
    ]
  },
  "state": {"slider_21": 50.0, "slider_22": 50.0}
}
```
Tokens:
Raw