Skip to main content
State provides local interpolation values to its children. Children resolve {{ }} template expressions against the State’s values first, falling through to parent scopes and then global state. This is useful when you want to inject data into a subtree without polluting global state or duplicating values across multiple props.

​
Basic Usage

​
How It Works

Any kwargs that aren’t base component fields (css_class, etc.) are collected into the state dict. You can also pass a dict positionally:
Equivalent Forms
from prefab_ui.components import State, Text

# Kwargs style
with State(name="Ford", role="Researcher"):
    Text("{{ name }} is a {{ role }}")

# Dict style
with State({"name": "Ford", "role": "Researcher"}):
    Text("{{ name }} is a {{ role }}")
Both forms produce the same wire format — a State node with a state object.

​
Nested State

State components can nest. Inner values shadow outer ones for the same key, and children see the merged context: The first Text renders “Don’t Panic, Arthur”. The second renders “Don’t Panic, Ford” — the inner State shadows name but inherits greeting.

​
With ForEach

State works well alongside ForEach for providing extra context to iterated templates:

​
API Reference

State Parameters

​
state
dict[str, Any]
default:"{}"
Dictionary of local state values. Can be passed as a positional dict or via kwargs.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes for the wrapper element.

​
Protocol Reference

State
{
  "type": "State",
  "children?": "[Component]",
  "state?": "object",
  "cssClass?": "string"
}
For the complete protocol schema, see State.