Tabs

A component for toggling between related panels. `Tabs.Indicator` is placed **inside** `Tabs.List` and uses CSS variables (`--active-tab-left`, `--active-tab-width`, etc.) to automatically position itself over the active tab.

Tabs component

Revenue (month)

$34,720

Compared to previous month

    import { Tabs } from "gnome-ui/tabs";

    export function TabsUnderline() {
      return (
        <Tabs.Root defaultValue="overview">
          <Tabs.List className="relative flex border-b border-border">
            <Tabs.Tab value="overview" className="data-[active]:text-foreground">
              Overview
            </Tabs.Tab>
            <Tabs.Tab value="projects" className="data-[active]:text-foreground">
              Projects
            </Tabs.Tab>
            {/* Indicator INSIDE List, uses component CSS variables */}
            <Tabs.Indicator
              className="absolute bottom-0 h-0.5 rounded-full bg-primary transition-[left,width] duration-200"
              style={{
                left: "var(--active-tab-left)",
                width: "var(--active-tab-width)",
              }}
            />
          </Tabs.List>
          <Tabs.Panel value="overview">...

      );
    }
  </Tabs.Panel>
</Tabs.Root>

Vertical

orientation="vertical" enables up/down arrow navigation. The Tabs.Indicator uses --active-tab-top and --active-tab-height.

General

Manage your account name, email address, and language preferences.

TabsIndicator

A visual indicator that can be styled to match the position of the currently active tab. Renders a <span> element.

Documentation: Base UI Tabs

API reference

Root

Groups the tabs and the corresponding panels. Renders a <div> element.

Root Props:

Prop	Type	Default	Description
defaultValue	`Tabs.Tab.Value`	`0`	The default value. Use when the component is not controlled. When the value is `null`, no Tab will be active.
value	`Tabs.Tab.Value`	-	The value of the currently active `Tab`. Use when the component is controlled. When the value is `null`, no Tab will be active.
onValueChange	`((value: Tabs.Tab.Value, eventDetails: Tabs.Root.ChangeEventDetails<'none', { activationDirection: Tabs.Tab.ActivationDirection }>) => void)`	-	Callback invoked when new value is being set.
orientation	`Tabs.Root.Orientation`	`'horizontal'`	The component orientation (layout flow direction).
className	`string \| ((state: Tabs.Root.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: Tabs.Root.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: Tabs.Root.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Root Data Attributes:

Attribute	Type	Description
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the tabs.
data-activation-direction	`'left' \| 'right' \| 'up' \| 'down' \| 'none'`	Indicates the direction of the activation (based on the previous active tab).

List

Groups the individual tab buttons. Renders a <div> element.

List Props:

Prop	Type	Default	Description
activateOnFocus	`boolean`	`false`	Whether to automatically change the active tab on arrow key focus. Otherwise, tabs will be activated using `Enter` or `Space` key press.
loopFocus	`boolean`	`true`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
className	`string \| ((state: Tabs.List.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: Tabs.List.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: Tabs.List.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

List Data Attributes:

Attribute	Type	Description
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the tabs.
data-activation-direction	`'left' \| 'right' \| 'up' \| 'down' \| 'none'`	Indicates the direction of the activation (based on the previous active tab).

Tab

An individual interactive tab button that toggles the corresponding panel. Renders a <button> element.

Tab Props:

Prop	Type	Default	Description
value	`Tabs.Tab.Value`	-	The value of the Tab.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`).
disabled	`boolean`	-	Whether the Tab is disabled.If a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected. Instead, the next enabled Tab will be selected. However, it does not work like this during server-side rendering, as it is not known during pre-rendering which Tabs are disabled. To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.
className	`string \| ((state: Tabs.Tab.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: Tabs.Tab.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: Tabs.Tab.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Tab Data Attributes:

Attribute	Type	Description
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the tabs.
data-disabled	-	Present when the tab is disabled.
data-activation-direction	`'left' \| 'right' \| 'up' \| 'down' \| 'none'`	Indicates the direction of the activation (based on the previous active tab).
data-active	-	Present when the tab is active.

Indicator

A visual indicator that can be styled to match the position of the currently active tab. Renders a <span> element.

Indicator Props:

Prop	Type	Default	Description
renderBeforeHydration	`boolean`	`false`	Whether to render itself before React hydrates. This minimizes the time that the indicator isn’t visible after server-side rendering.
className	`string \| ((state: Tabs.Indicator.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: Tabs.Indicator.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: Tabs.Indicator.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Indicator Data Attributes:

Attribute	Type	Description
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the tabs.
data-activation-direction	`'left' \| 'right' \| 'up' \| 'down' \| 'none'`	Indicates the direction of the activation (based on the previous active tab).

Indicator CSS Variables:

Variable	Type	Default	Description
--active-tab-bottom	`number`	-	Indicates the distance on the bottom side from the parent's container if the tab is active.
--active-tab-height	`number`	-	Indicates the width of the tab if it is active.
--active-tab-left	`number`	-	Indicates the distance on the left side from the parent's container if the tab is active.
--active-tab-right	`number`	-	Indicates the distance on the right side from the parent's container if the tab is active.
--active-tab-top	`number`	-	Indicates the distance on the top side from the parent's container if the tab is active.
--active-tab-width	`number`	-	Indicates the width of the tab if it is active.

Panel

A panel displayed when the corresponding tab is active. Renders a <div> element.

Panel Props:

Prop	Type	Default	Description
value	`Tabs.Tab.Value`	-	The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
className	`string \| ((state: Tabs.Panel.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: Tabs.Panel.State) => CSSProperties \| undefined)`	-	-
keepMounted	`boolean`	`false`	Whether to keep the HTML element in the DOM while the panel is hidden.
render	`ReactElement \| ((props: HTMLProps, state: Tabs.Panel.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Panel Data Attributes:

Attribute	Type	Description
data-orientation	`'horizontal' \| 'vertical'`	Indicates the orientation of the tabs.
data-activation-direction	`'left' \| 'right' \| 'up' \| 'down' \| 'none'`	Indicates the direction of the activation (based on the previous active tab).
data-hidden	-	Present when the panel is hidden.
data-index	-	Indicates the index of the tab panel.

General

On this page