Skip to main content
The Tabs component allows you to organize content into multiple views where only one view is visible at a time. It’s useful for grouping related information and reducing visual clutter.

​
Basic Usage

import { Tabs } from 'reshaped';

function App() {
  return (
    <Tabs defaultValue="overview">
      <Tabs.List>
        <Tabs.Item value="overview">Overview</Tabs.Item>
        <Tabs.Item value="details">Details</Tabs.Item>
        <Tabs.Item value="settings">Settings</Tabs.Item>
      </Tabs.List>
      
      <Tabs.Panel value="overview">
        Overview content
      </Tabs.Panel>
      <Tabs.Panel value="details">
        Details content
      </Tabs.Panel>
      <Tabs.Panel value="settings">
        Settings content
      </Tabs.Panel>
    </Tabs>
  );
}

​
Controlled Mode

Control the active tab externally: 
import { Tabs } from 'reshaped';
import { useState } from 'react';

function App() {
  const [activeTab, setActiveTab] = useState('overview');
  
  return (
    <Tabs
      value={activeTab}
      onChange={({ value }) => setActiveTab(value)}
    >
      <Tabs.List>
        <Tabs.Item value="overview">Overview</Tabs.Item>
        <Tabs.Item value="details">Details</Tabs.Item>
      </Tabs.List>
      
      <Tabs.Panel value="overview">
        Overview content
      </Tabs.Panel>
      <Tabs.Panel value="details">
        Details content
      </Tabs.Panel>
    </Tabs>
  );
}

​
Variants

Tabs supports multiple visual variants: 
<Tabs variant="bordered" defaultValue="tab1">
  {/* Tab content */}
</Tabs>

<Tabs variant="borderless" defaultValue="tab1">
  {/* Tab content */}
</Tabs>

<Tabs variant="pills" defaultValue="tab1">
  {/* Tab content */}
</Tabs>

<Tabs variant="pills-elevated" defaultValue="tab1">
  {/* Tab content */}
</Tabs>

​
Sizes

Tabs supports two size options: 
<Tabs size="medium" defaultValue="tab1">
  {/* Tab content */}
</Tabs>

<Tabs size="large" defaultValue="tab1">
  {/* Tab content */}
</Tabs>

​
With Icons

Add icons to tab items: 
import { Tabs } from 'reshaped';
import IconHome from '@/icons/Home';
import IconSettings from '@/icons/Settings';
import IconUser from '@/icons/User';

<Tabs defaultValue="home">
  <Tabs.List>
    <Tabs.Item value="home" icon={IconHome}>
      Home
    </Tabs.Item>
    <Tabs.Item value="profile" icon={IconUser}>
      Profile
    </Tabs.Item>
    <Tabs.Item value="settings" icon={IconSettings}>
      Settings
    </Tabs.Item>
  </Tabs.List>
  {/* Panels */}
</Tabs>

​
Direction

Display tabs vertically: 
<Tabs direction="column" defaultValue="tab1">
  <Tabs.List>
    <Tabs.Item value="tab1">Tab 1</Tabs.Item>
    <Tabs.Item value="tab2">Tab 2</Tabs.Item>
  </Tabs.List>
  {/* Panels */}
</Tabs>

​
Equal Width Items

Make all tab items have equal width: 
<Tabs itemWidth="equal" defaultValue="tab1">
  <Tabs.List>
    <Tabs.Item value="tab1">Short</Tabs.Item>
    <Tabs.Item value="tab2">Medium Length</Tabs.Item>
    <Tabs.Item value="tab3">Very Long Label</Tabs.Item>
  </Tabs.List>
  {/* Panels */}
</Tabs>

​
As Form Control

Use tabs as a radio button group in forms: 
<form>
  <Tabs name="plan" defaultValue="basic">
    <Tabs.List>
      <Tabs.Item value="basic">Basic</Tabs.Item>
      <Tabs.Item value="pro">Pro</Tabs.Item>
      <Tabs.Item value="enterprise">Enterprise</Tabs.Item>
    </Tabs.List>
  </Tabs>
</form>

​
Navigation Tabs

Use tabs for page navigation with links: 
<Tabs defaultValue="dashboard">
  <Tabs.List>
    <Tabs.Item value="dashboard" href="/dashboard">
      Dashboard
    </Tabs.Item>
    <Tabs.Item value="analytics" href="/analytics">
      Analytics
    </Tabs.Item>
    <Tabs.Item value="reports" href="/reports">
      Reports
    </Tabs.Item>
  </Tabs.List>
</Tabs>

​
Disabled Tabs

<Tabs defaultValue="tab1">
  <Tabs.List>
    <Tabs.Item value="tab1">Active Tab</Tabs.Item>
    <Tabs.Item value="tab2" disabled>
      Disabled Tab
    </Tabs.Item>
  </Tabs.List>
  {/* Panels */}
</Tabs>

​
Props

​
Tabs

​
value
string
Value of the active tab (controlled mode)
​
defaultValue
string
Default value of the active tab (uncontrolled mode)
​
onChange
(args: { value: string; name?: string }) => void
Callback when the active tab value changes
​
variant
'bordered' | 'borderless' | 'pills' | 'pills-elevated'
Render variant for component
​
size
'medium' | 'large'
default:"medium"
Component size
​
direction
'row' | 'column'
default:"row"
Direction of the tab buttons
​
itemWidth
'equal'
Equal width for all tab buttons
​
name
string
Name of the tab buttons group when used as a form control
​
disableSelectionAnimation
boolean
default:"false"
Disable the animation of the tab button selection
​
children
React.ReactNode
Tab list and panel components

​
Tabs.List

​
children
React.ReactNode
Tab items
​
className
string
Additional CSS class name
​
attributes
object
Additional HTML attributes

​
Tabs.Item

​
value
string
required
Value of the item used for the active item selection
​
icon
React.ComponentType
SVG component for the icon at the start position
​
href
string
Link URL, renders as an anchor element
​
disabled
boolean
default:"false"
Disable the item user interaction
​
attributes
object
Additional HTML attributes
​
children
React.ReactNode
Item content

​
Tabs.Panel

​
value
string
required
Value of the panel used for the active panel selection (must match a Tabs.Item value)
​
children
React.ReactNode
Panel content
​
className
string
Additional CSS class name
​
attributes
object
Additional HTML attributes

Build docs developers (and LLMs) love

Get started for freeTalk to us