> ## 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.
# PrefabApp
> The application object that ties together view, state, theme, and assets.
Every Prefab UI is wrapped in a `PrefabApp`. It holds your component tree, state, theme, and external assets together as a single unit.
## Creating an App
### Context manager
The natural way to build an app. Components inside the `with` block become the view:
```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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}%")
```
The context manager creates an implicit root Column, so children stack vertically. State, theme, and styling are declared upfront — by the time the first component renders, the app envelope is established.
The root Column gets a `pf-app-root` CSS class that themes target for default padding. Add your own classes via `css_class`:
```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
with PrefabApp(css_class="max-w-3xl mx-auto") as app:
Heading("Centered and constrained")
```
### Passing a view
If you build the tree separately, pass it via `view=`:
```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
with Column(css_class="p-6") as view:
Heading("Hello")
app = PrefabApp(view=view, state={"greeting": "Hello"})
```
### From wire data
`PrefabApp.from_json()` wraps pre-serialized wire protocol data, for example from sandboxed execution. Keyword arguments override values from the wire:
```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
wire = await sandbox.run(code)
app = PrefabApp.from_json(wire, state={"extra": "value"})
```
## Fields
| Field | Type | Description |
| ----------------- | ------------------------ | --------------------------------------------------------------------------------------- |
| `view` | `Component \| dict` | Component tree to render (set automatically in context manager mode) |
| `state` | `dict` | Initial client-side state |
| `theme` | `Theme` | Theme to apply — see [Themes](/styling/themes) |
| `css_class` | `str` | Additional CSS/Tailwind classes for the root container. Stacks on top of `pf-app-root`. |
| `defs` | `list[Define]` | Reusable component definitions |
| `stylesheets` | `list[str]` | External CSS URLs to load as `` tags |
| `css` | `list[str]` | Inline CSS strings to load as `