Skip to main content
Tabs organize content into panels that users switch between by clicking triggers. Each Tab child defines a trigger label and the content shown when that tab is active.

​
Basic Usage

Tabs let you split related content across panels that share the same space, showing one at a time. Wrap a set of Tab blocks in a Tabs container; each Tab takes a visible title and a value that identifies it, and the Tabs value sets which panel opens first. Use tabs to keep a busy screen — like a settings page with separate account and password sections — organized without forcing the user to scroll past everything at once.

​
Variants

The variant prop controls the visual style of the tab triggers. The default uses a pill-style background, while "line" uses an underline indicator.

​
Orientation

Set orientation="vertical" to stack the tab triggers in a column alongside the content.

​
State Tracking

Give Tabs a name to sync the active tab with client state. Other components can then read or change which tab is active — useful for building wizard flows or linking navigation between different parts of the UI.
Tabs with State
from prefab_ui.components import Button, Column, Row, Tab, Tabs, Text
from prefab_ui.actions import SetState

with Column(gap=4):
    with Tabs(name="activeTab", value="general"):
        with Tab("General", value="general"):
            Text("General settings here.")
        with Tab("Advanced", value="advanced"):
            Text("Advanced settings here.")

    with Row(gap=2):
        Button("Go to General", on_click=SetState("activeTab", "general"))
        Button("Go to Advanced", on_click=SetState("activeTab", "advanced"))

​
API Reference

Tabs Parameters

​
variant
str
default:"default"
Visual style: "default" (pill background) or "line" (underline indicator).
​
orientation
str
default:"horizontal"
Layout direction: "horizontal" (triggers above content) or "vertical" (triggers beside content).
​
value
str | None
default:"None"
Value of the initially active tab. If omitted, the first tab is active.
​
name
str | None
default:"None"
State key for tracking the active tab. Enables reading/writing the active tab from other components.
​
on_change
Action | list[Action] | None
default:"None"
Action(s) triggered when the active tab changes.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

Tab Parameters

​
title
str
required
Tab trigger label. Can be passed as a positional argument.
​
value
str | None
default:"None"
Unique value identifying this tab. Defaults to the title.
​
disabled
bool
default:"False"
Whether this tab is disabled.

​
Protocol Reference

Tabs
{
  "type": "Tabs",
  "id?": "string",
  "onMount?": "any",
  "children?": "[Component]",
  "let?": "object",
  "name?": "string",
  "value?": "string",
  "variant?": "default | line | string",
  "orientation?": "horizontal | vertical",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
Tab
{
  "type": "Tab",
  "id?": "string",
  "onMount?": "any",
  "children?": "[Component]",
  "let?": "object",
  "title": "string (required)",
  "value?": "string",
  "disabled?": false,
  "cssClass?": "string"
}
For the complete protocol schema, see Tabs, Tab.