Tabs

Tab panels are a collection of stacked sections of content, designed to exhibit only one section at a time.

Dependencies

• @radix-ui/react-tabs (opens in a new tab) - Tabs is built on top of Tabs primitive.

Usage

Hide Border

Easily customize styles with classNames to TabsList component to hide border.

Customize Background Highlighter

To enable customizability of the background highlighter, the TabsBackgroundHighlighter component is exposed. This component is used to render the background highlighter of the active tab. It is rendered in the TabsList component by default. But to customize styles of it, render it inside TabsList component and all props will automatically be merged.

Scroll Behavior

If all tabs cannot fit in the width then then hidden tabs can be accessed through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.)

Controlled

To control the tabs, use the value prop to Tabs component. The value prop is the value of the tab that should be active. The onValueChange prop is a function that will be called when the active tab is changed. The onValueChange prop is called with the value of the tab that should be active.

API Reference

To see the full API of Tabs component go to Radix Docs (opens in a new tab).