REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Navigation

Tabs

A compound tabbed interface component with tab list, individual tabs, and content panels for organizing content into switchable views.

Example

Preview

Code

Props

Tabs Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the tabs container.

defaultIndex

number

0

The initial active tab index when uncontrolled.

index

number

—

The controlled active tab index.

onChange

(index: number) => void

—

Callback invoked when the active tab changes.

variant

'underlined' | 'outline' | 'rounded'

'underlined'

The visual variant of the tabs.

size

'sm' | 'md' | 'lg'

'md'

Controls the height and font size of the tabs.

orientation

'horizontal' | 'vertical'

'horizontal'

The layout orientation of the tab list.

isFitted

boolean

false

When true, tabs stretch to fill the available width equally.

TabList Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the tab list container.

Tab Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the individual tab.

TabText Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the tab label text.

TabPanels Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the tab panels container.

TabPanel Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the individual tab panel.

index *

number

—

The index of the tab this panel corresponds to.

Usage Guidelines

When to use

Use Tabs to organize related content into separate views that users can switch between.

Best practices

•

Use for organizing related content into 2-5 switchable views.

•

Keep tab labels short (1-2 words).

•

Use isFitted when all tabs should have equal width.

Accessibility

Tabs implement the WAI-ARIA tabs pattern. Arrow keys navigate between tabs, and content is associated with its tab.

Related Components

Accordion

A compound collapsible content component supporting single or multiple expanded items, with trigger, title, icon, and content sub-components.

Breadcrumb

A compound navigation component that displays the current page location within a hierarchy using linked trail items.

Divider

A visual separator that divides content into distinct sections, supporting horizontal and vertical orientations.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License