wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Core

Configuration
Stack & Text
styled
Variants
Props
Themes
Animations
Theme
useMedia
useTheme
FontLanguage
Extras

Compiler

About
Install
Benchmarks

Theme

Colors
Tokens

Tamagui

Stacks
Headings
Paragraph

Forms

Button
Checkbox
Form
Input & TextArea
Label
Progress
RadioGroup
Select
Slider
Switch
ToggleGroup

Panels

AlertDialog
Dialog
Popover
Sheet
Tooltip
Toast

Organize

Group
Tabs

Content

Avatar
Card
Image
ListItem

Visual

LinearGradient
Separator
Square & Circle

Etc

Anchor
HTML Elements
ScrollView
Spinner
Unspaced
VisuallyHidden

Extras

Lucide Icons

Guides

Design Systems
How to Build a Button
Developing
Next.js
Expo
Vite
create-tamagui

Community

Community
Blog
GitHub
Twitter
Discord

Tabs

Use in pages to manage sub-pages.

Profile

Features

  • Accessible, easy to compose, customize and animate

  • Sizable & works controlled or uncontrolled

  • Supports automatic and manual activation modes for web

  • Full keyboard navigation

Note: Tabs have landed on v1.7 and not fully ready for runtime. Send us your feedback and we'll address it. We're marking it Beta a such as there may be hopefully minimal breaking changes as we get feedback on the API.

Usage

import { Tabs } from 'tamagui'



export default () => (

  <Tabs defaultValue="tab1" width={400}>

    <Tabs.List space>

      <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>

      <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>

    </Tabs.List>



    <Tabs.Content value="tab1">

      <H5>Tab 1</H5>

    </Tabs.Content>

    <Tabs.Content value="tab2">

      <H5>Tab 2</H5>

    </Tabs.Content>

  </Tabs>

)

Advanced Demo

Here is a demo with more advanced animations using AnimatePresence and Trigger's onInteraction prop.

tab1

API

Tabs

Root tabs component. Extends Stack. Passing the size prop to this component will have effect on the descendants.

Props

  • value

    string

    The value for the selected tab, if controlled

  • defaultValue

    string

    The value of the tab to select by default, if uncontrolled

  • onValueChange

    (value: string) => void

    A function called when a new tab is selected

  • orientation

    "horizontal" | "vertical"

    Default: 

    horizontal

    The orientation the tabs are layed out

  • dir

    "ltr" | "rtl"

    The direction of navigation between toolbar items

  • activationMode

    "manual" | "automatic"

    Default: 

    automatic

    Whether or not a tab is activated automatically or manually. Not applicable on mobile

    • List

    Container for the trigger buttons. Supports scrolling by extending Group. You can disable passing border radius to children by passing disablePassBorderRadius.

    Props

  • loop

    boolean

    Default: 

    true

    Whether or not to loop over after reaching the end or start of the items. Used mainly for managing keyboard navigation

    • Trigger

    Extends Button, adding:

    Props

  • value

    string

    The value for the tabs state to be changed to after activation of the trigger

  • onInteraction

    (type: InteractionType, layout: TabTriggerLayout | null) => void

    Used for making custom indicators when trigger interacted with

  • unstyled

    boolean

    When true, remove all default tamagui styling

    • Content

    Where each tab's content will be shown. Extends ThemeableStack, adding:

    Props

  • value

    string

    Will show the content when the value matches the state of Tabs root

  • forceMount

    boolean

    Default: 

    false

    Used to force mounting when more control is needed. Useful when controlling animation with Tamagui animations

    • Previous

    Group

    Next

    Avatar

    Edit this page on GitHub.