Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Installation

Command to install the Tabs component.

buridan add tabs

uv run buridan add tabs

python -m buridan add tabs

Component Guide

Use the following to build the Tabs component.

from components.ui.tabs import tabs

tabs.root(
    tabs.list(
        tabs.trigger(),
    ),
    tabs.content(),
)

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/ui/tabs.py

Examples

Basic

import reflex as rx

from components.ui.card import card
from components.ui.tabs import tabs


def tabs_basic() -> rx.Component:
    return tabs.root(
        tabs.list(
            tabs.trigger("Overview", value="overview"),
            tabs.trigger("Analytics", value="analytics"),
            tabs.trigger("Reports", value="reports"),
            tabs.trigger("Settings", value="settings"),
        ),
        tabs.content(
            card.root(
                card.header(
                    card.title("Overview"),
                    card.description(
                        "View your key metrics and recent project activity. Track progress "
                        "across all your active projects."
                    ),
                ),
                card.content(
                    "You have 12 active projects and 3 pending tasks.",
                    class_name="text-sm text-muted-foreground",
                ),
            ),
            value="overview",
        ),
        tabs.content(
            card.root(
                card.header(
                    card.title("Analytics"),
                    card.description(
                        "Track performance and user engagement metrics. Monitor trends and "
                        "identify growth opportunities."
                    ),
                ),
                card.content(
                    "Page views are up 25% compared to last month.",
                    class_name="text-sm text-muted-foreground",
                ),
            ),
            value="analytics",
        ),
        tabs.content(
            card.root(
                card.header(
                    card.title("Reports"),
                    card.description(
                        "Generate and download your detailed reports. Export data in "
                        "multiple formats for analysis."
                    ),
                ),
                card.content(
                    "You have 5 reports ready and available to export.",
                    class_name="text-sm text-muted-foreground",
                ),
            ),
            value="reports",
        ),
        tabs.content(
            card.root(
                card.header(
                    card.title("Settings"),
                    card.description(
                        "Manage your account preferences and options. Customize your "
                        "experience to fit your needs."
                    ),
                ),
                card.content(
                    "Configure notifications, security, and themes.",
                    class_name="text-sm text-muted-foreground",
                ),
            ),
            value="settings",
        ),
        default_value="overview",
        class_name="w-[400px]",
    )

Line

Use the variant="line" prop on tabs.list for a line style.

import reflex as rx

from components.ui.tabs import tabs


def tabs_line() -> rx.Component:
    return tabs.root(
        tabs.list(
            tabs.trigger("Overview", value="overview"),
            tabs.trigger("Analytics", value="analytics"),
            tabs.trigger("Reports", value="reports"),
            variant="line",
        ),
        default_value="overview",
    )

Vertical

Use orientation="vertical" for vertical tabs.

import reflex as rx

from components.ui.tabs import tabs


def tabs_vertical():
    return rx.el.div(
        tabs.root(
            tabs.list(
                tabs.trigger("Account", value="account"),
                tabs.trigger("Password", value="password"),
                tabs.trigger("Notifications", value="notifications"),
            ),
            default_value="account",
            orientation="vertical",
        ),
        class_name="flex justify-center text-sm",
    )

Disabled

Use disabled=True to disable a tab.

from components.ui.tabs import tabs


def tabs_disabled():
    return tabs.root(
        tabs.list(
            tabs.trigger("Home", value="home"),
            tabs.trigger(
                "Disabled",
                value="settings",
                disabled=True,
            ),
        ),
        default_value="home",
    )

Icons

import reflex as rx

from components.core.hugeicon import hi
from components.ui.tabs import tabs


def tabs_icons() -> rx.Component:
    return tabs.root(
        tabs.list(
            tabs.trigger(
                hi("BrowserIcon"),
                "Preview",
                value="preview",
            ),
            tabs.trigger(
                hi("CodeIcon"),
                "Code",
                value="code",
            ),
        ),
        default_value="preview",
    )

API Reference

tabs.root

The main container component that initializes your tab instance, holds the active state configuration on the client, and dictates the layout orientation.

tabs.root(
    tabs.list(
        tabs.trigger("Overview", value="overview"),
        tabs.trigger("Analytics", value="analytics"),
    ),
    tabs.content(
        "Overview panel data",
        value="overview"
    ),
    default_value="overview",
)

Prop	Type	Default
`default_value`	`str`	`""`
`orientation`	`Literal["horizontal", "vertical"]`	`"horizontal"`
`class_name`	`str`	`""`

tabs.list

Groups the trigger navigation buttons together and controls the visual theme style.

tabs.list(
    tabs.trigger("Tab 1", value="tab1"),
    tabs.trigger("Tab 2", value="tab2"),
    variant="line",
)

Prop	Type	Default
`variant`	`Literal["default", "line"]`	`"default"`
`class_name`	`str`	`""`

tabs.trigger

The clickable button elements used to switch active states. They safely merge internal client-side JS actions with optional user-supplied events.

tabs.trigger(
    "Analytics",
    value="analytics",
    on_click=rx.console_log("Switched tabs!")
)

Prop	Type	Default
`value`	`str`	Required
`class_name`	`str`	`""`
`id`	`str`	Auto-generated UUID
`disabled`	`bool`	`False`
`on_click`	`Union[EventHandler, list[EventHandler]]`	`None`
`on_mount`	`Union[EventHandler, list[EventHandler]]`	`None`

tabs.content

The structural panel containing content mapped to a specific tab trigger value. Toggles layout visibility instantly purely using CSS attribute matching.

tabs.content(
    "Your dashboard analytics modules go here.",
    value="analytics",
)

Prop	Type	Default
`value`	`str`	Required
`class_name`	`str`	`""`

External Tools

︲

On This Page