> ## 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.
# Tabs
> Tabbed interface for switching between panels of content.
export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
const hostRef = React.useRef(null);
const handleRef = React.useRef(null);
const cardRef = React.useRef(null);
const containerRef = React.useRef(null);
const [previewWidth, setPreviewWidth] = React.useState(null);
const [isDragging, setIsDragging] = React.useState(false);
const [playgroundHref, setPlaygroundHref] = React.useState(null);
React.useEffect(function () {
if (!playground) return;
var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
var path = isLocal ? "/playground" : "/docs/playground";
var url = new URL(path, window.location.href);
url.hash = "code=" + playground;
setPlaygroundHref(url.href);
}, [playground]);
var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
React.useEffect(function () {
if (cardRef.current) {
var card = cardRef.current.closest(".group");
if (card) card.classList.remove("group");
}
var host = hostRef.current;
if (!host || !json) return;
function mount() {
if (!window.__prefab || !host) return;
var dark = document.documentElement.classList.contains("dark");
handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
dark: dark
});
if (bare && host.shadowRoot) {
var m = host.shadowRoot.querySelector("[data-prefab-mount]");
if (m) m.style.background = "transparent";
}
}
if (window.__prefab) {
mount();
} else {
if (!window.__prefabLoading) {
if (!window.__prefabReady) {
var s = document.createElement("script");
s.src = "/renderer.js";
document.head.appendChild(s);
}
window.__prefabLoading = new Promise(function (resolve) {
function check() {
if (window.__prefabReady) {
window.__prefabReady.then(resolve);
} else {
setTimeout(check, 10);
}
}
check();
});
}
window.__prefabLoading.then(mount);
}
var observer = new MutationObserver(function () {
var dark = document.documentElement.classList.contains("dark");
if (handleRef.current) handleRef.current.setDark(dark);
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return function () {
observer.disconnect();
if (handleRef.current) {
handleRef.current.unmount();
handleRef.current = null;
}
};
}, [json]);
function startResize(e) {
e.preventDefault();
var startX = e.clientX;
var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
setIsDragging(true);
function onMove(ev) {
var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
setPreviewWidth(w);
}
function onUp() {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
setIsDragging(false);
}
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
}
if (bare) {
return ;
}
if (resizable) {
return
{previewWidth &&
{previewWidth}px
}
{playgroundHref && }
{children}
;
}
return
{playgroundHref && }
{children}
;
};
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.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
Column,
Input,
Label,
Tab,
Tabs,
)
with Tabs(value="account"):
with Tab("Account", value="account"):
with Card():
with CardHeader():
CardTitle("Account")
CardDescription("Make changes to your account here.")
with CardContent():
with Column(gap=3):
Label("Name")
Input(placeholder="Your name")
with Tab("Password", value="password"):
with Card():
with CardHeader():
CardTitle("Password")
CardDescription("Change your password here.")
with CardContent():
with Column(gap=3):
Label("Current Password")
Input(input_type="password")
Label("New Password")
Input(input_type="password")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"name": "tabs_1",
"value": "account",
"type": "Tabs",
"variant": "default",
"orientation": "horizontal",
"children": [
{
"type": "Tab",
"title": "Account",
"value": "account",
"disabled": false,
"children": [
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{"type": "CardTitle", "content": "Account"},
{"type": "CardDescription", "content": "Make changes to your account here."}
]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{"type": "Label", "text": "Name", "optional": false},
{
"name": "input_18",
"type": "Input",
"inputType": "text",
"placeholder": "Your name",
"disabled": false,
"readOnly": false,
"required": false
}
]
}
]
}
]
}
]
},
{
"type": "Tab",
"title": "Password",
"value": "password",
"disabled": false,
"children": [
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{"type": "CardTitle", "content": "Password"},
{"type": "CardDescription", "content": "Change your password here."}
]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-3",
"type": "Column",
"children": [
{"type": "Label", "text": "Current Password", "optional": false},
{
"name": "input_19",
"type": "Input",
"inputType": "password",
"disabled": false,
"readOnly": false,
"required": false
},
{"type": "Label", "text": "New Password", "optional": false},
{
"name": "input_20",
"type": "Input",
"inputType": "password",
"disabled": false,
"readOnly": false,
"required": false
}
]
}
]
}
]
}
]
}
]
},
"state": {"tabs_1": "account"}
}
```
## 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.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Column, Tab, Tabs, Text
with Column(gap=16, css_class="w-fit mx-auto"):
with Tabs(value="one"):
with Tab("Mostly", value="one"):
Text("Don't panic.")
with Tab("Harmless", value="two"):
Text("It's a wholly remarkable book.")
with Tab("Guide", value="three"):
Text("A towel is the most massively useful thing.")
with Tabs(variant="line", value="one"):
with Tab("Mostly", value="one"):
Text("Don't panic.")
with Tab("Harmless", value="two"):
Text("It's a wholly remarkable book.")
with Tab("Guide", value="three"):
Text("A towel is the most massively useful thing.")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-16 w-fit mx-auto",
"type": "Column",
"children": [
{
"name": "tabs_2",
"value": "one",
"type": "Tabs",
"variant": "default",
"orientation": "horizontal",
"children": [
{
"type": "Tab",
"title": "Mostly",
"value": "one",
"disabled": false,
"children": [{"content": "Don't panic.", "type": "Text"}]
},
{
"type": "Tab",
"title": "Harmless",
"value": "two",
"disabled": false,
"children": [{"content": "It's a wholly remarkable book.", "type": "Text"}]
},
{
"type": "Tab",
"title": "Guide",
"value": "three",
"disabled": false,
"children": [{"content": "A towel is the most massively useful thing.", "type": "Text"}]
}
]
},
{
"name": "tabs_3",
"value": "one",
"type": "Tabs",
"variant": "line",
"orientation": "horizontal",
"children": [
{
"type": "Tab",
"title": "Mostly",
"value": "one",
"disabled": false,
"children": [{"content": "Don't panic.", "type": "Text"}]
},
{
"type": "Tab",
"title": "Harmless",
"value": "two",
"disabled": false,
"children": [{"content": "It's a wholly remarkable book.", "type": "Text"}]
},
{
"type": "Tab",
"title": "Guide",
"value": "three",
"disabled": false,
"children": [{"content": "A towel is the most massively useful thing.", "type": "Text"}]
}
]
}
]
},
"state": {"tabs_2": "one", "tabs_3": "one"}
}
```
## Orientation
Set `orientation="vertical"` to stack the tab triggers in a column alongside the content.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Column, Tab, Tabs, Text
with Column(gap=16, css_class="w-48 mx-auto"):
with Tabs(orientation="vertical", value="one"):
with Tab("Mostly", value="one"):
Text("Don't panic.")
with Tab("Harmless", value="two"):
Text("It's a wholly remarkable book.")
with Tab("Guide", value="three"):
Text("A towel is the most massively useful thing.")
with Tabs(variant="line", orientation="vertical", value="one"):
with Tab("Mostly", value="one"):
Text("Don't panic.")
with Tab("Harmless", value="two"):
Text("It's a wholly remarkable book.")
with Tab("Guide", value="three"):
Text("A towel is the most massively useful thing.")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-16 w-48 mx-auto",
"type": "Column",
"children": [
{
"name": "tabs_4",
"value": "one",
"type": "Tabs",
"variant": "default",
"orientation": "vertical",
"children": [
{
"type": "Tab",
"title": "Mostly",
"value": "one",
"disabled": false,
"children": [{"content": "Don't panic.", "type": "Text"}]
},
{
"type": "Tab",
"title": "Harmless",
"value": "two",
"disabled": false,
"children": [{"content": "It's a wholly remarkable book.", "type": "Text"}]
},
{
"type": "Tab",
"title": "Guide",
"value": "three",
"disabled": false,
"children": [{"content": "A towel is the most massively useful thing.", "type": "Text"}]
}
]
},
{
"name": "tabs_5",
"value": "one",
"type": "Tabs",
"variant": "line",
"orientation": "vertical",
"children": [
{
"type": "Tab",
"title": "Mostly",
"value": "one",
"disabled": false,
"children": [{"content": "Don't panic.", "type": "Text"}]
},
{
"type": "Tab",
"title": "Harmless",
"value": "two",
"disabled": false,
"children": [{"content": "It's a wholly remarkable book.", "type": "Text"}]
},
{
"type": "Tab",
"title": "Guide",
"value": "three",
"disabled": false,
"children": [{"content": "A towel is the most massively useful thing.", "type": "Text"}]
}
]
}
]
},
"state": {"tabs_4": "one", "tabs_5": "one"}
}
```
## 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.
```python Tabs with State theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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
Visual style: `"default"` (pill background) or `"line"` (underline indicator).
Layout direction: `"horizontal"` (triggers above content) or `"vertical"` (triggers beside content).
Value of the initially active tab. If omitted, the first tab is active.
State key for tracking the active tab. Enables reading/writing the active tab from other components.
Action(s) triggered when the active tab changes.
Additional Tailwind CSS classes.
Tab trigger label. Can be passed as a positional argument.
Unique value identifying this tab. Defaults to the title.
Whether this tab is disabled.
## Protocol Reference
```json Tabs theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"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"
}
```
```json Tab theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"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](/protocol/tabs), [Tab](/protocol/tab).