Photonix

Tabs

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

Preview

Usage
"use client";

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

const tabs = [
    { id: 'overview', label: 'Overview', icon: <DocumentOutline /> },
    { id: 'schedule', label: 'Schedule', icon: <CalendarOutline /> },
    { id: 'settings', label: 'Settings', icon: <SettingsOutline /> },
];

export default function TabsBasicExample() {
    const [activeTab, setActiveTab] = useState('overview');

    return (
        <Box w="480px" maxW="100%">
            <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} variant="line" />
        </Box>
    );
}

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

Tabs With Icons

Tabs require active state and an onChange handler, so the canonical snippet includes both.

Tabs With Icons
"use client";

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

const tabs = [
    { id: 'overview', label: 'Overview', icon: <DocumentOutline /> },
    { id: 'schedule', label: 'Schedule', icon: <CalendarOutline /> },
    { id: 'settings', label: 'Settings', icon: <SettingsOutline /> },
];

export default function TabsBasicExample() {
    const [activeTab, setActiveTab] = useState('overview');

    return (
        <Box w="480px" maxW="100%">
            <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} variant="line" />
        </Box>
    );
}

With Icons

Tabs can include icons alongside labels.

With Icons
"use client";

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

export default function TabsIconsExample() {
    const [activeTab, setActiveTab] = useState('1');

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

Icon Only

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

Icon Only
"use client";

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

export default function TabsIconOnlyExample() {
    const [activeTab, setActiveTab] = useState('1');

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

Stacked (Vertical Item)

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

Stacked (Vertical Item)
"use client";

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

export default function TabsStackedExample() {
    const [activeTab, setActiveTab] = useState('1');

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

Elevated

Elevated tabs have a background and shadow.

Elevated
"use client";

import { useState } from 'react';
import { Box, Tabs } from '@photonix/ultimate';

export default function TabsElevatedExample() {
    const [activeTab, setActiveTab] = useState('1');

    return (
        <Box w="100%" maxW={400}>
            <Tabs
                elevated
                activeTab={activeTab}
                onChange={setActiveTab}
                tabs={[
                    { id: '1', label: 'Tab 1' },
                    { id: '2', label: 'Tab 2' },
                    { id: '3', label: 'Tab 3' },
                ]}
            />
        </Box>
    );
}

Overflow Controls

When the tab row overflows horizontally, Tabs can show previous and next buttons automatically.

Overflow Controls
"use client";

import { useState } from 'react';
import { Box, Tabs } from '@photonix/ultimate';

export default function TabsOverflowControlsExample() {
    const [activeTab, setActiveTab] = useState('1');

    return (
        <Box w="100%" maxW={420}>
            <Tabs
                activeTab={activeTab}
                onChange={setActiveTab}
                overflowControls="auto"
                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' },
                ]}
            />
        </Box>
    );
}

With Chevron

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

With Chevron
"use client";

import { useState } from 'react';
import { Tabs } from '@photonix/ultimate';

export default function TabsChevronExample() {
    const [activeTab, setActiveTab] = useState('1');

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

Scrollable Tabs

When tabs exceed the container width, they become scrollable and the active tab scrolls into view.

Scrollable Tabs
"use client";

import { useState } from 'react';
import { Box, Tabs } from '@photonix/ultimate';

export default function TabsScrollableExample() {
    const [activeTab, setActiveTab] = useState('1');

    return (
        <Box w="100%" maxW={600} border="1px solid var(--border-neutral-tertiary)" p="sm" borderRadius="2xs">
            <Tabs
                activeTab={activeTab}
                onChange={setActiveTab}
                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' },
                ]}
            />
        </Box>
    );
}

On this page

Preview
Component API
Variants
Basic Usage
With Icons
Icon Only
Stacked (Vertical Item)
With Chevron
Elevated
Overflow Controls
Scrollable Tabs
Photonix UI - React Components, Templates & Figma Design System