Introduction
Components
- Accordion
- Action Sheet
- Alert
- Audio Player
- Audio Recorder
- Audio Waveform
- Avatar
- AvoidKeyboard
- Badge
- BottomSheet
- Button
- Camera
- Camera Preview
- Card
- Carousel
- Checkbox
- Collapsible
- Color Picker
- Combobox
- Date Picker
- File Picker
- Gallery
- Hello Wave
- Icon
- Image
- Input
- Input OTP
- Link
- MediaPicker
- Mode Toggle
- Onboarding
- ParallaxScrollView
- Picker
- Popover
- Progress
- Radio
- ScrollView
- SearchBar
- Separator
- Share
- Sheet
- Skeleton
- Spinner
- Switch
- Table
- Tabs
- Text
- Toast
- Toggle
- Video
- View
Charts
Installation
pnpm dlx bna-ui add tabs
Usage
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';<Tabs defaultValue='tab1'>
<TabsList>
<TabsTrigger value='tab1'>Tab 1</TabsTrigger>
<TabsTrigger value='tab2'>Tab 2</TabsTrigger>
<TabsTrigger value='tab3'>Tab 3</TabsTrigger>
</TabsList>
<TabsContent value='tab1'>
<Text>Content for Tab 1</Text>
</TabsContent>
<TabsContent value='tab2'>
<Text>Content for Tab 2</Text>
</TabsContent>
<TabsContent value='tab3'>
<Text>Content for Tab 3</Text>
</TabsContent>
</Tabs>Examples
Default
Vertical Orientation
Disabled Tabs
Custom Styling
API Reference
Tabs
The root container for the tabs component.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The tabs list and content components. |
defaultValue | string | - | The value of the tab that should be active by default. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the tabs. |
style | ViewStyle | - | Additional styles to apply to the container. |
TabsList
Container for the tab triggers.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The tab trigger components. |
style | ViewStyle | - | Additional styles to apply to the tabs list. |
TabsTrigger
The clickable tab that activates its associated content.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content of the tab trigger (usually text). |
value | string | - | The unique value that identifies this tab. |
disabled | boolean | false | Whether the tab is disabled. |
style | ViewStyle | - | Additional styles to apply to the trigger. |
textStyle | TextStyle | - | Additional styles to apply to the trigger text. |
TabsContent
The content panel associated with a tab trigger.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to display when the tab is active. |
value | string | - | The value that matches the associated trigger. |
style | ViewStyle | - | Additional styles to apply to the content. |
Accessibility
The Tabs component is built with accessibility in mind:
- Uses proper ARIA roles and properties for screen readers
- Supports keyboard navigation between tabs
- Active tab is properly announced to screen readers
- Disabled tabs are marked as inaccessible
- Content is properly associated with its trigger