Tabs with line, pill, enclosed and segment variants, a sliding indicator, vertical mode, lazy panels and closable/addable/draggable tabs.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-tabs/latest/gs-tabs.min.css"> <script src="https://cdn.get-set.it/gs-tabs/latest/gs-tabs.min.js"></script>
import Tabs from '@get-set/gs-tabs'; export default function App() { return ( <Tabs> <div className="content">Your Tabs content</div> </Tabs> ); }
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Reference. |
| tabs | GSTabConfig[] | none | Tab definitions as a config array. When omitted, tabs are read from the markup children (native) / rendered children (React). |
| activeTab | string | number | none | Controlled active tab id (or index). When provided, fully controlled. |
| defaultActiveTab | string | number | none | Uncontrolled initial active tab id (or index). Default: first enabled. |
| orientation | GSTabsOrientation | 'horizontal' | Layout axis of the tablist. Default: 'horizontal'. |
| tabPosition | GSTabsPosition | 'top' | Tablist placement relative to the panels. Default: 'top'. |
| variant | GSTabsVariant | 'line' | Visual variant. Default: 'line'. |
| size | GSTabsSize | 'md' | Size preset. Default: 'md'. |
| align | GSTabsAlign | 'start' | Tab distribution within the tablist. Default: 'start'. |
| stretch | boolean | false | Stretch tabs to fill the tablist (shorthand for align:'stretch'). |
| lazy | boolean | false | Mount a panel only the first time its tab is activated. Default: false (all panels mounted up-front). |
| keepMounted | boolean | true | Keep a lazily-mounted panel in the DOM after it is deactivated (hidden). Default: true. When false, inactive lazy panels are unmounted. |
| animation | GSTabsAnimation | false | 'fade' | Panel transition name. `false` disables panel motion. Default: 'fade'. |
| animationDuration | number | GSTabsAnimationDuration | 260 | Panel transition duration in ms. Default: 260. |
| animationEasing | string | 'cubic-bezier(.4,0,.2,1)' | CSS easing applied to the panel transition + indicator slide. |
| animatedIndicator | boolean | true | Animate the active-indicator bar sliding between tabs (line / underline variants). Default: true. |
| reducedMotion | 'auto' | boolean | 'auto' | Honor `prefers-reduced-motion`. `'auto'` follows the OS setting; `true` always reduces; `false` never reduces. Default: 'auto'. |
| closable | boolean | false | Show a close (×) button on every tab. Per-tab `closable` overrides this. |
| addable | boolean | false | Show a trailing "add tab" (+) button. Default: false. |
| addButtonLabel | string | '+' | Label / HTML for the add button. Default: '+'. |
| draggable | boolean | false | Reorder tabs by dragging them. Default: false. |
| overflow | GSTabsOverflow | 'scroll' | How to handle tabs exceeding the tablist width. `scroll` shows prev/next scroll buttons; `menu` collapses overflow into a dropdown; `wrap` wraps to multiple rows; `none` clips. Default: 'scroll'. |
| theme | GSTabsTheme | 'auto' | Visual theme. `auto` follows prefers-color-scheme. Default: 'auto'. |
| accent | string | none | Accent color (CSS var --gst-accent) for the indicator / active tab. |
| rtl | boolean | false | Right-to-left layout. Default: false. |
| customClass | GSTabsCustomClass | none | Per-part class overrides. |
| className | string | none | Extra class name applied to the root. |
Line, pill, enclosed and segment styles.
Animated active-tab underline / pill.
Mount panel content only when first shown.
Reorder, add and close tabs inline.