Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time, with a tab header controlling which panel is shown.

Usage

import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
 
<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <Text>Make changes to your account here.</Text>
  </TabsContent>
  <TabsContent value="password">
    <Text>Change your password here.</Text>
  </TabsContent>
</Tabs>;

Components

Tabs

Also extends all React Native View component props.

TabsList

Also extends all React Native View component props.

TabsTrigger

Also extends all React Native Pressable component props.

TabsContent

Also extends all React Native View component props.

Hooks

useTabs

The backbone hook for the tabs component that manages controlled/uncontrolled state.

Parameters:

Returns:

{
  state: {
    selectedValue: string | null;
    setSelectedValue: (value: string) => void;
    isControlled: boolean;
  };
}

useTabsList

The hook for the tabs list component that provides accessibility and merged props.

Parameters:

Returns:

{
  componentProps: ComponentProps<typeof View> | HTMLDivElement;
  disabledAll: boolean;
}

useTabsTrigger

The hook for the tabs trigger component that provides accessibility and onPress behavior.

Parameters:

Returns:

{
  componentProps: ComponentProps<typeof Pressable> | HTMLButtonElement;
  isActive: boolean;
}

useTabsContent

The hook for the tabs content component that provides accessibility and visibility state.

Parameters:

Returns:

{
  componentProps: ComponentProps<typeof View> | HTMLDivElement;
  isSelected: boolean;
}

Accessibility

The Tabs component is built with accessibility in mind and includes:

Web Accessibility

• Uses proper ARIA attributes: role="tablist", role="tab", role="tabpanel"
• Supports keyboard navigation (Arrow keys for tab selection, Enter/Space for activation)
• Focus management between tabs and content
• Proper labeling with aria-selected and aria-controls

React Native Accessibility

• accessibilityRole="tablist" for the tabs container
• accessibilityRole="tab" for individual tab triggers
• accessibilityRole="tabpanel" for tab content
• accessibilityState with selected and disabled states
• Proper focus management for screen readers

Styling

TabsList Classes

Base Classes: flex flex-row w-fit items-center justify-center rounded-md bg-muted p-1 text-muted-foreground

Variants:

• orientation:

  • horizontal - Default horizontal layout
  • vertical - Vertical layout with flex-col

• size:

  • sm - Small height: h-9
  • md (default) - Medium height: h-10
  • lg - Large height: h-11
  • xl - Extra large height: h-12

• radius:

  • none - No radius: rounded-none
  • sm - Small radius: rounded-sm
  • md (default) - Medium radius: rounded-md
  • lg - Large radius: rounded-lg
  • xl - Extra large radius: rounded-xl

• variant:

  • shadcn (default) - Standard styling
  • underlined - Transparent background: bg-transparent
  • outlined - Transparent background with border: bg-transparent border border-border
  • ghost - Transparent background: bg-transparent

Compound Variants:

• Vertical orientation with different sizes adjusts width and height accordingly

TabsTrigger Classes

Base Classes: inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1 text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50

Variants:

• active:

  • true - Active state: bg-background text-foreground shadow-sm
  • false - Inactive state (no additional classes)

• variant:

  • shadcn (default) - Standard styling
  • underlined - Transparent background with no shadow: bg-transparent rounded-none shadow-none
  • outlined - Standard styling
  • ghost - Standard styling

• color:

  • default (default) - Standard color scheme
  • secondary - Secondary color scheme
  • destructive - Destructive color scheme
  • outline - Outline color scheme

• borderRadius:

  • none - No radius: rounded-none
  • sm - Extra small radius: rounded-xs
  • md (default) - Small radius: rounded-sm
  • lg - Medium radius: rounded-md
  • xl - Large radius: rounded-lg

Compound Variants:

• underlined variant with active: true adds bottom border: border-b-2 border-border

TabsContent Classes

Base Classes: mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2