Create an organized UI using the gluestack-ui Tabs component in React & React Native. Add tabbed navigation seamlessly with animations. This is an illustration of Tabs component.

Installation

Run the following command:

npx gluestack-ui@alpha add tabs

API Reference

To use this component in your project, include the following import statement in your file.

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  TabsTriggerText,
  TabsTriggerIcon,
  TabsIndicator,
} from '@/components/ui/tabs';

export default () => (
  <Tabs defaultValue="tab1">
    <TabsList>
      <TabsTrigger value="tab1">
        <TabsTriggerIcon as={IconComponent} />
        <TabsTriggerText>Tab 1</TabsTriggerText>
      </TabsTrigger>
      <TabsTrigger value="tab2">
        <TabsTriggerText>Tab 2</TabsTriggerText>
      </TabsTrigger>
      <TabsIndicator />
    </TabsList>
    <TabsContent value="tab1">
      <Text>Content for Tab 1</Text>
    </TabsContent>
    <TabsContent value="tab2">
      <Text>Content for Tab 2</Text>
    </TabsContent>
  </Tabs>
);

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Tabs

Contains all the tabs component parts.

Prop	Type	Default	Description
value	string	-	The controlled value of the tab to activate. Use with onValueChange.
defaultValue	string	-	The value of the tab that should be active when initially rendered. Use when you do not need to control the state.
onValueChange	(value: string) => void	-	Event handler called when the value changes.
orientation	'horizontal' \| 'vertical'	'horizontal'	The orientation of the tabs.
activationMode	'automatic' \| 'manual'	'automatic'	Whether tabs activate automatically on focus or manually with Enter/Space.
disabled	boolean	false	When true, prevents the user from interacting with the tabs.
variant	'underlined' \| 'filled' \| 'enclosed'	'underlined'	The visual style variant of the tabs.
size	'sm' \| 'md' \| 'lg'	'md'	The size of the tabs.

TabsList

Contains the triggers that are aligned along the edge of the active content.

Prop	Type	Default	Description
scrollable	boolean	false	When true, enables horizontal scrolling for overflow tabs.
snapToCenter	boolean	true	When scrollable is true, snaps the selected tab to center.

TabsTrigger

The button that activates its associated content.

Prop	Type	Default	Description
value	string	-	A unique value that associates the trigger with a content.
disabled	boolean	false	When true, prevents the user from interacting with the tab.

TabsContent

Contains the content associated with each trigger.

Prop	Type	Default	Description
value	string	-	A unique value that associates the content with a trigger.
forceMount	boolean	false	Used to force mounting when more control is needed. Useful for animation.

TabsTriggerText

The text displayed within a tab trigger. It inherits all the properties of React Native's

Text

component.

TabsTriggerIcon

The icon displayed within a tab trigger.

Prop	Type	Default	Description
as	React.ComponentType	-	The icon component to render.

TabsIndicator

The animated indicator that shows which tab is currently selected. Place this component inside TabsList to control its position. It inherits all the properties of React Native's

View

component.

Accessibility

Adheres to the

Tabs WAI-ARIA design pattern

Keyboard Interactions

Key	Description
Tab	When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
ArrowDown	Moves focus to the next trigger in vertical orientation and activates its associated content.
ArrowUp	Moves focus to the previous trigger in vertical orientation and activates its associated content.
ArrowLeft	Moves focus to the previous trigger in horizontal orientation and activates its associated content.
ArrowRight	Moves focus to the next trigger in horizontal orientation and activates its associated content.
Home	Moves focus to the first trigger and activates its associated content.
End	Moves focus to the last trigger and activates its associated content.

Examples

With Indicator

The TabsIndicator animates between the selected tab trigger. It is positioned absolutely inside the TabsList and slides to follow the active tab.

Vertical Orientation

Vertical

Set orientation to vertical to render the tab list along the left side. The indicator animates vertically between the selected triggers.

With Icons

Use TabsTriggerIcon with the as prop to add icons alongside the trigger text in each tab.

Variants

Tabs supports two variants: underlined shows a sliding underline indicator beneath the active tab, and filled shows a filled background pill that slides between tabs.

Scrollable

When there are more tabs than the available width, the TabsList scrolls horizontally. The animated indicator stays synchronized with the scroll position.

Controlled

A controlled Tabs component manages its active tab via the value and onValueChange props. This allows external UI to programmatically switch between tabs.

Edit this page on GitHub