Tabs
Organise content into switchable panels.
1use herogpui::components::tabs::{TabItem, Tabs};Usage
Tab labels use a 20px line height independently of surrounding text.
1use herogpui::prelude::{TabItem, Tabs};
2use gpui::prelude::*;
3
4Tabs::new(
5 "tabs-usage",
6 vec![
7 TabItem::new("photos", "Photos")
8 .content(gpui::div().child("Your photo library.")),
9 TabItem::new("music", "Music")
10 .content(gpui::div().child("Playlists and albums.")),
11 TabItem::new("videos", "Videos")
12 .content(gpui::div().child("Everything you have filmed.")),
13 ],
14 "photos",
15)Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
TabsTabItem
Tabs is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Tabs uses.
Styling
| Style | Description |
|---|---|
flex + gap(px(8)) + orientation layout | Root orientation and spacing. |
relative + default fill + radius_lg * 2.5 | Primary list tray. |
raw overflow scroller; chevrons are measured but edge fades are absent | Scrollable viewport follows the configured axis without remapping wheel input from the other axis; fading overflow edges remain unavailable. |
16px transparent occluding chevrons driven by ScrollHandle bounds | Previous and next overflow controls. |
hover opacity snaps; no property interpolation or programmatic focus ring | Chevron interaction feedback. |
flex_shrink_0 + p(px(4)) + horizontal min width | Primary list sizing and inset. |
flex_col + gap(px(4)) + min_w(px(80)) | Vertical list geometry. |
32px height + 16px padding + control_radius + 14px medium text | Tab box and 14px typography with a fixed 20px line height. |
state colors and opacity swap on a frame | Property interpolation between tab states. |
segment foreground + indicator + adjacent separator motion | Selected primary-tab styling. |
hover(.. opacity(0.7)) | Pointer hover treatment in both variants. |
with_focus_ring | Keyboard focus treatment. |
absolute hairline_radius + muted alpha 0.25 child | Separator ownership and fill. |
border-width hairline with 50% or 90% relative span | Orientation-specific separator geometry. |
SeparatorMotion + Curve::Smooth + reduce_motion snap | Selection-adjacent separator fade. |
w_full + p(px(8)) + 16px orientation margin | Active panel size, inset and orientation spacing. |
measured absolute child + segment fill + control_radius + surface shadow | Primary selected-segment surface. |
IndicatorMotion + Curve::OutFluid + reduce_motion snap | Selection indicator geometry motion. |
border-only container + zero list inset + no separators + square tabs | Secondary variant reset. |
accent indicator without radius or shadow | Secondary selection line. |
orientation border + 2px indicator target | Secondary tray border and indicator axis. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
variant( | TabsVariant | TabsVariant:: | Visual style variant: a filled segment or an underline. |
orientation( | Orientation | Orientation:: | Tab-list and panel layout orientation. |
selected_key( | key | — | Controlled selected tab key. |
default_selected_key( | key | — | Initial selected key for uncontrolled tabs. |
on_selection_change( | Fn( | — | Reports the selected key from tab activation. |
new( | key, | — | Unique tab identifier and selection key. |
is_disabled( | bool | false | Removes one tab from pointer and roving-keyboard activation. |
Parts
| Part | Description |
|---|---|
Tabs | Root flex container that orients the list and active panel. |
Tabs | Container owning the scroller and overflow chevrons. |
Tabs | Scrollable row or column and its shared roving focus handle. |
TabItem | One keyed, selectable tab segment. |
TabItem | Optional pointer-inert hairline before a primary tab. |
Tabs | Measured filled pill or accent line following the selected tab. |
TabItem | Content associated with the selected tab key. |
States
| Builder | State | Description |
|---|---|---|
selected_key / active branch | Selected | Moves the indicator and applies selected foreground styling. |
hover(.. opacity(0.7)) | Hovered | Dims an enabled, unselected tab to 70% opacity. |
with_focus_ring + focus_visible | Focus visible | Draws the shared roving stop's focus-visible ring. |
is_disabled || item.is_disabled | Disabled | Dims the tab and removes it from pointer and keyboard activation. |
selected_key + on_selection_change | Controlled selection | Moves roving focus and reports changes without mutating owner state. |
default_selected_key + keyed selection state | Uncontrolled selection | Holds selection and repairs it when the selected item disappears. |