Tabs

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

str

default:"default"

Visual style: "default" (pill background) or "line" (underline indicator).

str

default:"horizontal"

Layout direction: "horizontal" (triggers above content) or "vertical" (triggers beside content).

str | None

default:"None"

Value of the initially active tab. If omitted, the first tab is active.

str | None

default:"None"

State key for tracking the active tab. Enables reading/writing the active tab from other components.

Action | list[Action] | None

default:"None"

Action(s) triggered when the active tab changes.

str | None

default:"None"

Additional Tailwind CSS classes.

Tab Parameters

str

required

Tab trigger label. Can be passed as a positional argument.

str | None

default:"None"

Unique value identifying this tab. Defaults to the title.

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.

Get Started

Concepts

Apps

Running Prefab

Examples

Reference

Basic Usage

Variants

Orientation

State Tracking

API Reference

Tabs Parameters

Tab Parameters

Protocol Reference

​Basic Usage

​Variants

​Orientation

​State Tracking

​API Reference

Tabs Parameters

Tab Parameters

​Protocol Reference

Basic Usage

Variants

Orientation

State Tracking

API Reference

Protocol Reference