Photonix UI - React Components, Templates & Figma Design System

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Preview

Account

Make changes to your account here.

Usage

import { Tabs } from '@photonix/ultimate';
import { UserOutline, SettingsOutline, CalendarOutline } from '@photonix/icons';
import { useState } from 'react';

export default function MyTabs() {
  const [activeTab, setActiveTab] = useState('account');
  
  const tabs = [
    { id: 'account', label: 'Account', icon: <UserOutline /> },
    { id: 'password', label: 'Password', icon: <SettingsOutline /> },
    { id: 'settings', label: 'Settings', icon: <CalendarOutline /> },
  ];

  return (
    <Tabs 
      tabs={tabs} 
      activeTab={activeTab} 
      onChange={setActiveTab} 
    />
  );
}

Component API

Tabs

Prop	Type	Default	Description
tabs	`TabOption[]`	`-`	Array of tab items to display
activeTab	`string`	`-`	Currently active tab ID
onChange	`(tabId: string) => void`	`-`	Callback when tab changes
stacked	`boolean`	`-`	Whether to stack icon on top of label (vertical item layout)
className	`string`	`-`	Optional class name for the container
elevated	`boolean`	`-`	Whether the tabs are elevated (shows shadow and divider)
sticky	`boolean`	`-`	Whether the tabs are sticky (position sticky with elevator bg and shadow)
stuck	`boolean`	`-`	Optional externally controlled stuck state
padded	`string \| number \| boolean`	`-`	Whether the tabs have horizontal padding (16px default), or custom value
style	`React.CSSProperties`	`-`	Optional style object for the container
activationMode	`"automatic" \| "manual"`	`'automatic'`	Activation mode - 'automatic' (default) or 'manual' Automatic: Selection follows focus immediately Manual: User must press Enter/Space to select after focusing
variant	`"pill" \| "line"`	`'line'`	Visual variant
size	`"small" \| "large" \| "medium"`	`'medium'`	Sizing
overflowControls	`"auto" \| "never"`	`'auto'`	Whether horizontal overflow controls should appear automatically

TabOption

Prop	Type	Default	Description
id	`string`	`-`	Unique identifier for the tab.
label	`string`	`-`	Text label for the tab.
icon	`ReactNode`	`-`	Optional icon for the tab.
disabled	`boolean`	`false`	Whether the tab is disabled.
showChevron	`boolean`	`false`	Whether to show a chevron icon.

Variants

Basic Usage

Standard tabs with labels only.

Basic Usage

<Tabs 
  tabs={[
    { id: '1', label: 'Music' },
    { id: '2', label: 'Podcasts' },
    { id: '3', label: 'Live' }
  ]}
  activeTab={activeTab}
  onChange={setActiveTab}
/>

With Icons

Tabs can include icons alongside labels.

With Icons

import { UserOutline, SettingsOutline, CalendarOutline } from '@photonix/icons';

<Tabs 
  tabs={[
    { id: '1', label: 'Personal', icon: <UserOutline /> },
    { id: '2', label: 'Schedule', icon: <CalendarOutline /> },
    { id: '3', label: 'Settings', icon: <SettingsOutline /> }
  ]}
  activeTab={activeTab}
  onChange={setActiveTab}
/>

Icon Only

Tabs can be displayed with icons only for a more compact look.

Icon Only

<Tabs 
  tabs={[
    { id: '1', icon: <UserOutline /> },
    { id: '2', icon: <CalendarOutline /> },
    { id: '3', icon: <SettingsOutline /> }
  ]}
  activeTab={activeTab}
  onChange={setActiveTab}
/>

Stacked (Vertical Item)

The 'stacked' prop places the icon on top of the label.

Stacked (Vertical Item)

<Tabs 
  stacked
  tabs={[
    { id: '1', label: 'Personal', icon: <UserOutline /> },
    { id: '2', label: 'Schedule', icon: <CalendarOutline /> },
    { id: '3', label: 'Settings', icon: <SettingsOutline /> }
  ]}
  activeTab={activeTab}
  onChange={setActiveTab}
/>

Elevated

Elevated tabs have a background and shadow.

Elevated

<Tabs elevated tabs={...} />

Overflow Controls

When the tab row overflows horizontally, Tabs can show previous and next buttons automatically to help users scroll the list.

Overflow Controls

<Box style={{ width: '100%', maxWidth: '420px' }}>
  <Tabs
    tabs={[
      { id: '1', label: 'Overview' },
      { id: '2', label: 'Analytics' },
      { id: '3', label: 'Reports' },
      { id: '4', label: 'Members' },
      { id: '5', label: 'Billing' },
      { id: '6', label: 'Settings' },
    ]}
    activeTab={activeTab}
    onChange={setActiveTab}
    overflowControls="auto"
  />
</Box>

With Chevron

Tabs can include a chevron icon, often used to indicate a dropdown menu.

With Chevron

<Tabs 
  tabs={[
    { id: '1', label: 'Dashboard' },
    { id: '2', label: 'Documents' },
    { id: '3', label: 'More', showChevron: true }
  ]}
  activeTab={activeTab}
  onChange={setActiveTab}
/>

Scrollable Tabs

When tabs exceed the container width, they become scrollable. The active tab is automatically scrolled into view.

Scrollable Tabs

<Box style={{ width: '100%', maxWidth: '320px', border: '1px solid var(--border-neutral-tertiary)', padding: '16px', borderRadius: '8px' }}>
  <Tabs 
    tabs={[
      { id: '1', label: 'Overview' },
      { id: '2', label: 'Analytics' },
      { id: '3', label: 'Reports' },
      { id: '4', label: 'History' },
      { id: '5', label: 'Settings' },
      { id: '6', label: 'Users' },
      { id: '7', label: 'Security' },
      { id: '8', label: 'Notifications' },
      { id: '9', label: 'Billing' }
    ]}
    activeTab={activeTab}
    onChange={setActiveTab}
  />
</Box>

Tabs

Preview

Component API

Tabs

TabOption

Variants

Basic Usage

With Icons

Icon Only

Stacked (Vertical Item)

Elevated

Overflow Controls

With Chevron

Scrollable Tabs

On this page