Tab

The Tab component is a versatile navigation component that organizes content into multiple sections accessible through tab buttons. It supports multiple variants, icons, vertical layouts, and various styling options for creating organized and user-friendly interfaces.

Overview

The Tab component is designed to provide flexible content organization with:

• Multiple variants (default, underline, vertical, background)
• Icon support for tab buttons
• Vertical and horizontal layouts
• Border and shadow options
• Disabled state support
• Responsive design
• Dark mode support

Basic Usage

import { Tabs } from '@/components/molecules'

function MyComponent() {
  const tabItems = [
    { label: 'Tab 1', content: <div>Content for Tab 1</div> },
    { label: 'Tab 2', content: <div>Content for Tab 2</div> },
    { label: 'Tab 3', content: <div>Content for Tab 3</div> },
  ]

  return (
    <Tabs 
      tabs={tabItems} 
      variant='default' 
      defaultIndex={0}
      onChange={(index) => console.log('Tab changed to:', index)}
    />
  )
}

Props

Prop	Type	Default	Description
tabs	Array	[]	Array of tab objects with label, icon, content, disabled
variant	string	'default'	Tab variant ('default', 'underline', 'vertical', 'background')
defaultIndex	number	0	Index of the initially active tab
onChange	function	-	Callback when tab changes
className	string	''	Additional CSS classes
withBorder	boolean	false	Whether to show border under tabs
withShadow	boolean	false	Whether to show shadow on active tab

Tab Object Structure

{
  label: 'Tab Label',           // Required: Tab button text
  icon: 'lucide:home',          // Optional: Icon for tab button
  content: <div>Content</div>,  // Required: Tab content
  disabled: false               // Optional: Whether tab is disabled
}

Basic Tabs

Default Tabs

<Card>
  <h4 className='mb-2'>Basic Tab</h4>
  <Tabs tabs={tabItems} variant='background' withBorder />
</Card>

Default Variant

<Card>
  <h4 className='mb-2'>Tab with Default</h4>
  <Tabs tabs={tabItems} />
</Card>

With Underline

<Card>
  <h4 className='mb-2'>Tab with Underline</h4>
  <Tabs tabs={tabUnderline} variant='underline' withBorder />
</Card>

Tab Variants

Default Variant

<Card>
  <h4 className='mb-2'>Default Variant</h4>
  <Tabs tabs={tabItems} variant='default' />
</Card>

Underline Variant

<Card>
  <h4 className='mb-2'>Underline Variant</h4>
  <Tabs tabs={tabItems} variant='underline' withBorder />
</Card>

Background Variant

<Card>
  <h4 className='mb-2'>Background Variant</h4>
  <Tabs tabs={tabItems} variant='background' withBorder />
</Card>

Vertical Variant

<Card>
  <h4 className='mb-2'>Vertical Variant</h4>
  <Tabs tabs={tabItems} variant='vertical' />
</Card>

Tabs with Icons

Default with Icons

<Card>
  <h4 className='mb-2'>Tab with Default and Icons</h4>
  <Tabs tabs={tabIcons} />
</Card>

Background with Icons

<Card>
  <h4 className='mb-2'>Tab with Background and Icons</h4>
  <Tabs tabs={tabIcons} variant='background' withBorder />
</Card>

Underline with Icons

<Card>
  <h4 className='mb-2'>Tab with Underline and Icons</h4>
  <Tabs tabs={tabIcons} variant='underline' withBorder />
</Card>

Styling Options

With Border

<Card>
  <h4 className='mb-2'>Tabs with Border</h4>
  <Tabs tabs={tabItems} variant='underline' withBorder />
</Card>

With Shadow

<Card>
  <h4 className='mb-2'>Tab with Background and Shadow</h4>
  <Tabs tabs={tabItems} variant='background' withShadow />
</Card>

Vertical Layout

<Card>
  <h4 className='mb-2'>Tab with Vertical Layout</h4>
  <Tabs tabs={tabVertical} variant='vertical' />
</Card>

Advanced Examples

Complete Tab Setup

<Card>
  <h4 className='mb-2'>Complete Tab Example</h4>
  <Tabs 
    tabs={tabItems}
    variant='background'
    defaultIndex={1}
    withBorder
    withShadow
    onChange={(index) => console.log('Active tab:', index)}
  />
</Card>

Tabs with Disabled State

<Card>
  <h4 className='mb-2'>Tabs with Disabled State</h4>
  <Tabs 
    tabs={[
      { label: 'Active Tab', content: <div>This tab is active</div> },
      { label: 'Disabled Tab', content: <div>This tab is disabled</div>, disabled: true },
      { label: 'Another Tab', content: <div>Another active tab</div> },
    ]}
    variant='background'
  />
</Card>

Complex Content Tabs

<Card>
  <h4 className='mb-2'>Complex Content Tabs</h4>
  <Tabs 
    tabs={[
      { 
        label: 'Dashboard', 
        icon: 'lucide:bar-chart-3',
        content: (
          <div className='p-4 bg-gray-50 rounded-lg'>
            <h3 className='text-lg font-semibold mb-2'>Dashboard Overview</h3>
            <p>This is the dashboard content with charts and metrics.</p>
          </div>
        )
      },
      { 
        label: 'Settings', 
        icon: 'lucide:settings',
        content: (
          <div className='p-4 bg-gray-50 rounded-lg'>
            <h3 className='text-lg font-semibold mb-2'>Settings Panel</h3>
            <p>Configure your application settings here.</p>
          </div>
        )
      },
      { 
        label: 'Profile', 
        icon: 'lucide:user',
        content: (
          <div className='p-4 bg-gray-50 rounded-lg'>
            <h3 className='text-lg font-semibold mb-2'>User Profile</h3>
            <p>View and edit your profile information.</p>
          </div>
        )
      },
    ]}
    variant='background'
    withBorder
  />
</Card>

Responsive Vertical Tabs

<Card>
  <h4 className='mb-2'>Responsive Vertical Tabs</h4>
  <Tabs 
    tabs={[
      { label: 'Overview', content: <div>Overview content</div> },
      { label: 'Details', content: <div>Details content</div> },
      { label: 'Settings', content: <div>Settings content</div> },
      { label: 'Help', content: <div>Help content</div> },
    ]}
    variant='vertical'
  />
</Card>

Examples

Basic Tab

<Card>
  <h4 className='mb-2'>Basic Tab</h4>
  <Tabs tabs={tabItems} variant='background' withBorder />
</Card>

Tab with Default

<Card>
  <h4 className='mb-2'>Tab with Default</h4>
  <Tabs tabs={tabItems} />
</Card>

Tab with Underline

<Card>
  <h4 className='mb-2'>Tab with Underline</h4>
  <Tabs tabs={tabUnderline} variant='underline' withBorder />
</Card>

Tab with Default and Icons

<Card>
  <h4 className='mb-2'>Tab with Default and Icons</h4>
  <Tabs tabs={tabIcons} />
</Card>

Tab with Background and Icons

<Card>
  <h4 className='mb-2'>Tab with Background and Icons</h4>
  <Tabs tabs={tabIcons} variant='background' withBorder />
</Card>

Tab with Underline and Icons

<Card>
  <h4 className='mb-2'>Tab with Underline and Icons</h4>
  <Tabs tabs={tabIcons} variant='underline' withBorder />
</Card>

Tab with Background and Shadow

<Card>
  <h4 className='mb-2'>Tab with Background and Shadow</h4>
  <Tabs tabs={tabItems} variant='background' withShadow />
</Card>

Tab with Vertical Layout

<Card>
  <h4 className='mb-2'>Tab with Vertical Layout</h4>
  <Tabs tabs={tabVertical} variant='vertical' />
</Card>

State Management

Using useState

import { useState } from 'react'

const TabExample = () => {
  const [activeTab, setActiveTab] = useState(0)
  
  const tabItems = [
    { label: 'Tab 1', content: <div>Content 1</div> },
    { label: 'Tab 2', content: <div>Content 2</div> },
    { label: 'Tab 3', content: <div>Content 3</div> },
  ]

  const handleTabChange = (index) => {
    setActiveTab(index)
    console.log('Tab changed to:', index)
  }

  return (
    <Tabs 
      tabs={tabItems}
      defaultIndex={activeTab}
      onChange={handleTabChange}
      variant='background'
    />
  )
}

Controlled Tabs

const ControlledTabs = () => {
  const [activeTab, setActiveTab] = useState(0)
  
  const tabItems = [
    { label: 'Home', icon: 'lucide:home', content: <div>Home content</div> },
    { label: 'Profile', icon: 'lucide:user', content: <div>Profile content</div> },
    { label: 'Settings', icon: 'lucide:settings', content: <div>Settings content</div> },
  ]

  return (
    <div className='space-y-4'>
      <div className='flex gap-2'>
        <button 
          onClick={() => setActiveTab(0)}
          className={`px-3 py-1 rounded ${activeTab === 0 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
        >
          Home
        </button>
        <button 
          onClick={() => setActiveTab(1)}
          className={`px-3 py-1 rounded ${activeTab === 1 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
        >
          Profile
        </button>
        <button 
          onClick={() => setActiveTab(2)}
          className={`px-3 py-1 rounded ${activeTab === 2 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
        >
          Settings
        </button>
      </div>
      
      <Tabs 
        tabs={tabItems}
        defaultIndex={activeTab}
        onChange={setActiveTab}
        variant='background'
      />
    </div>
  )
}

CSS Classes Reference

Tab Container

• .tabs-root - Base tab container
• .tabs-root.is-vertical - Vertical layout container
• .tabs-list - Tab button list container
• .tabs-list.is-vertical - Vertical tab list
• .tabs-list.with-border - Tab list with border
• .tabs-content - Tab content container
• .tabs-content.is-vertical - Vertical content container

Tab Buttons

• .tab-button - Base tab button
• .tab-button.is-active - Active tab button
• .tab-button.is-disabled - Disabled tab button
• .tab-button.with-shadow - Tab button with shadow

Tab Variants

• .tab-button.tab-default - Default tab variant
• .tab-button.tab-underline - Underline tab variant
• .tab-button.tab-vertical - Vertical tab variant
• .tab-button.tab-background - Background tab variant

Styling

The Tab component uses Tailwind CSS classes and includes:

• Flexible Layout: Horizontal and vertical layouts
• Multiple Variants: Default, underline, vertical, background
• Icon Support: NavIcon integration for tab buttons
• Responsive Design: Mobile-friendly with overflow handling
• Dark Mode: Automatic dark mode variants
• Smooth Transitions: CSS transitions for state changes
• Accessibility: Proper ARIA attributes and keyboard navigation

Accessibility

The Tab component includes accessibility features:

• ARIA Attributes: Proper role and aria-selected attributes
• Keyboard Navigation: Tab and arrow key support
• Screen Reader Support: Meaningful labels and descriptions
• Focus Management: Visible focus indicators
• Semantic HTML: Proper button and content structure

Best Practices

1. Use meaningful labels for better user understanding
2. Include icons for visual recognition
3. Consider mobile users with responsive design
4. Use appropriate variants for your use case
5. Handle disabled states properly
6. Test keyboard navigation for accessibility compliance

Common Use Cases

• Content organization: Organize related content into sections
• Settings panels: Group settings into logical categories
• Dashboard layouts: Separate different dashboard views
• Form sections: Break complex forms into manageable parts
• Documentation: Organize documentation into chapters
• Product features: Showcase different product features

Related Components

• NavIcon - Used for tab button icons
• Card - Often used as a container for tab examples
• Button - For custom tab triggers
• Badges - For displaying status in tabs