Skip to main content
Pages provide a multi-page layout where only the active page renders. Navigate between pages by setting client state — there’s no tab bar, so you control the navigation UI yourself with buttons, links, or any other component.

​
Basic Usage

The name prop connects the Pages component to client state. When the entry key changes (via SetState), the corresponding page renders. This makes Pages ideal for wizard flows, multi-step forms, or any layout where you want to swap entire sections without a server round-trip.

​
Step-by-Step Navigation

Pages pair naturally with SetState to build wizard flows. Each page’s button advances to the next step:

​
API Reference

Pages Parameters

​
default_value
str | None
default:"None"
Value of the initially active page.
​
name
str | None
default:"None"
State key for tracking the active page. Other components can write to this key with SetState.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

Page Parameters

​
title
str
required
Page identifier. Can be passed as a positional argument.
​
value
str | None
default:"None"
Unique value for this page. Defaults to the title.

​
Protocol Reference

Pages
{
  "type": "Pages",
  "children?": "[Component]",
  "defaultValue?": "string",
  "name?": "string",
  "cssClass?": "string"
}
Page
{
  "type": "Page",
  "children?": "[Component]",
  "title": "string (required)",
  "value?": "string",
  "cssClass?": "string"
}
For the complete protocol schema, see Pages, Page.