Skip to Content
Dashflow Logo

Tabs Component

A comprehensive guide to using the Tabs component with examples, props, and best practices.

Overview

The Tabs component provides a tabbed interface that allows users to switch between different content sections. It's designed for organizing related content and improving navigation within a single page.

Basic Usage

// Note: Import Tabs components from @dashflowx/core
// import { Tabs, TabsList, TabsTrigger, TabsContent } from '@dashflowx/core'


export default function TabsExample() {
  return (
    <Tabs defaultValue="tab1" className="w-full">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">Content for Tab 1</TabsContent>
      <TabsContent value="tab2">Content for Tab 2</TabsContent>
      <TabsContent value="tab3">Content for Tab 3</TabsContent>
    </Tabs>
  )
}

Preview:

Content for Tab 1

Examples

Basic Tabs

// Import Tabs components from @dashflowx/core
// import { Tabs, TabsList, TabsTrigger, TabsContent } from '@dashflowx/core'


export default function BasicTabs() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">Overview</TabsTrigger>
        <TabsTrigger value="tab2">Details</TabsTrigger>
        <TabsTrigger value="tab3">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">Overview content goes here</TabsContent>
      <TabsContent value="tab2">Details content goes here</TabsContent>
      <TabsContent value="tab3">Settings content goes here</TabsContent>
    </Tabs>
  )
}

Preview:

Overview content goes here

Different Variants

// Import Tabs components from @dashflowx/core
// import { Tabs, TabsList, TabsTrigger, TabsContent } from '@dashflowx/core'


export default function VariantTabs() {
  return (
    <div className="space-y-4">
      {/* Default variant */}
      <Tabs defaultValue="tab1" variant="default">
        <TabsList>
          <TabsTrigger value="tab1">Default</TabsTrigger>
          <TabsTrigger value="tab2">Variant</TabsTrigger>
        </TabsList>
        <TabsContent value="tab1">Default variant content</TabsContent>
        <TabsContent value="tab2">Default variant content</TabsContent>
      </Tabs>


      {/* Minimal variant */}
      <Tabs defaultValue="tab1" variant="minimal">
        <TabsList>
          <TabsTrigger value="tab1">Minimal</TabsTrigger>
          <TabsTrigger value="tab2">Variant</TabsTrigger>
        </TabsList>
        <TabsContent value="tab1">Minimal variant content</TabsContent>
        <TabsContent value="tab2">Minimal variant content</TabsContent>
      </Tabs>
    </div>
  )
}

Preview:

Content for Tab 1

Different Sizes

// import { Tabs, TabsList, TabsTrigger, TabsContent } from '@dashflowx/core'


export default function SizeTabs() {
  return (
    <div className="space-y-4">
      {/* Small size */}
      <Tabs defaultValue="tab1" size="sm">
        <TabsList>
          <TabsTrigger value="tab1">Small</TabsTrigger>
          <TabsTrigger value="tab2">Size</TabsTrigger>
        </TabsList>
        <TabsContent value="tab1">Small size content</TabsContent>
        <TabsContent value="tab2">Small size content</TabsContent>
      </Tabs>


      {/* Medium size (default) */}
      <Tabs defaultValue="tab1" size="md">
        <TabsList>
          <TabsTrigger value="tab1">Medium</TabsTrigger>
          <TabsTrigger value="tab2">Size</TabsTrigger>
        </TabsList>
        <TabsContent value="tab1">Medium size content</TabsContent>
        <TabsContent value="tab2">Medium size content</TabsContent>
      </Tabs>


      {/* Large size */}
      <Tabs defaultValue="tab1" size="lg">
        <TabsList>
          <TabsTrigger value="tab1">Large</TabsTrigger>
          <TabsTrigger value="tab2">Size</TabsTrigger>
        </TabsList>
        <TabsContent value="tab1">Large size content</TabsContent>
        <TabsContent value="tab2">Large size content</TabsContent>
      </Tabs>
    </div>
  )
}

Preview:

Content for Tab 1

Vertical Orientation

// import { Tabs, TabsList, TabsTrigger, TabsContent } from '@dashflowx/core'


export default function VerticalTabs() {
  return (
    <Tabs defaultValue="tab1" orientation="vertical" className="flex">
      <TabsList className="flex-col">
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">Vertical tab content 1</TabsContent>
      <TabsContent value="tab2">Vertical tab content 2</TabsContent>
      <TabsContent value="tab3">Vertical tab content 3</TabsContent>
    </Tabs>
  )
}

Preview:

Content for Tab 1

Custom Styling

// import { Tabs, TabsList, TabsTrigger, TabsContent } from '@dashflowx/core'


export default function CustomTabs() {
  return (
    <Tabs defaultValue="tab1" className="border rounded-lg p-4">
      <TabsList className="bg-gray-100">
        <TabsTrigger value="tab1" className="data-[state=active]:bg-white">
          Custom Tab 1
        </TabsTrigger>
        <TabsTrigger value="tab2" className="data-[state=active]:bg-white">
          Custom Tab 2
        </TabsTrigger>
      </TabsList>
      <TabsContent value="tab1" className="mt-4 p-4 bg-white rounded">
        Custom styled content 1
      </TabsContent>
      <TabsContent value="tab2" className="mt-4 p-4 bg-white rounded">
        Custom styled content 2
      </TabsContent>
    </Tabs>
  )
}

Preview:

Content for Tab 1

Props Reference

Tabs Component Props

PropTypeDefaultDescription
defaultValuestringundefinedThe default active tab value
valuestringundefinedControlled active tab value
onValueChange(value: string) => voidundefinedCallback when tab changes
classNamestring''Additional CSS classes
variant'default' | 'minimal' | 'compact' | 'extended''default'Visual variant
size'sm' | 'md' | 'lg''md'Size of the tabs
orientation'horizontal' | 'vertical''horizontal'Tab orientation

TabsList Component Props

PropTypeDefaultDescription
classNamestring''Additional CSS classes

TabsTrigger Component Props

PropTypeDefaultDescription
valuestringundefinedUnique value for the tab
disabledbooleanfalseDisable the tab
classNamestring''Additional CSS classes

TabsContent Component Props

PropTypeDefaultDescription
valuestringundefinedUnique value for the content
classNamestring''Additional CSS classes

Markdoc Usage

The tabs can be used in Markdoc with the {% tabs %} tag:

[object Object],

Markdoc Attributes

AttributeTypeDefaultDescription
tabsArrayArray[]Array of tab objects
defaultActivenumber1Default active tab index
classNamestring''Additional CSS classes
buttonClassNamestring''CSS classes for tab buttons
variantstring'default'Visual variant
sizestring'md'Size of the tabs
orientationstring'horizontal'Tab orientation

Best Practices

Accessibility

  • Use meaningful tab labels
  • Ensure proper keyboard navigation
  • Provide clear visual indicators for active tabs

Performance

  • Use defaultValue for uncontrolled tabs
  • Use value and onValueChange for controlled tabs
  • Avoid unnecessary re-renders

Styling

  • Use consistent spacing and typography
  • Ensure tabs are clearly distinguishable
  • Test across different screen sizes
  • Accordion: For collapsible content sections
  • Card: For content containers
  • Button: For interactive elements

Examples

Basic Tabs

// import { Tabs } from '@dashflowx/core'


export default function BasicTabs() {
  const tabsArray = [
    { id: 1, title: 'Tab 1', content: 'Content for Tab 1' },
    { id: 2, title: 'Tab 2', content: 'Content for Tab 2' },
    { id: 3, title: 'Tab 3', content: 'Content for Tab 3' }
  ];


  return (
    <Tabs 
      tabsArray={tabsArray}
      defaultActive={1}
    />
  )
}

Preview:

Content for Tab 1

Custom Styled Tabs

// import { Tabs } from '@dashflowx/core'


export default function CustomStyledTabs() {
  const tabsArray = [
    { id: 1, title: 'Tab 1', content: 'Content for Tab 1' },
    { id: 2, title: 'Tab 2', content: 'Content for Tab 2' },
    { id: 3, title: 'Tab 3', content: 'Content for Tab 3' }
  ];


  return (
    <Tabs 
      tabsArray={tabsArray}
      defaultActive={1}
      className="border border-blue-500 rounded-lg p-4"
    />
  )
}

Preview:

Content for Tab 1

Settings Tabs

// import { Tabs } from '@dashflowx/core'


export default function SettingsTabs() {
  const tabsArray = [
    { id: 1, title: 'General', content: 'General settings content' },
    { id: 2, title: 'Security', content: 'Security settings content' },
    { id: 3, title: 'Privacy', content: 'Privacy settings content' }
  ];


  return (
    <Tabs 
      tabsArray={tabsArray}
      defaultActive={1}
    />
  )
}

Preview:

No content

Product Information Tabs

// import { Tabs } from '@dashflowx/core'


export default function ProductInfoTabs() {
  const tabsArray = [
    { id: 1, title: 'Description', content: 'Product description content' },
    { id: 2, title: 'Specifications', content: 'Product specifications content' },
    { id: 3, title: 'Reviews', content: 'Product reviews content' }
  ];


  return (
    <Tabs 
      tabsArray={tabsArray}
      defaultActive={1}
    />
  )
}

Preview:

No content

User Profile Tabs

// import { Tabs } from '@dashflowx/core'


export default function UserProfileTabs() {
  const tabsArray = [
    { id: 1, title: 'Profile', content: 'User profile content' },
    { id: 2, title: 'Activity', content: 'User activity content' },
    { id: 3, title: 'Settings', content: 'User settings content' }
  ];


  return (
    <Tabs 
      tabsArray={tabsArray}
      defaultActive={1}
    />
  )
}

Preview:

No content

Common Use Cases

Settings Panel

const settingsPanel = (
  <Tabs 
    tabsArray={[
      { id: 1, title: 'General', content: 'General settings' },
      { id: 2, title: 'Security', content: 'Security settings' },
      { id: 3, title: 'Privacy', content: 'Privacy settings' }
    ]}
    defaultActive={1}
  />
);

Product Information

const productInfo = (
  <Tabs 
    tabsArray={[
      { id: 1, title: 'Description', content: 'Product description' },
      { id: 2, title: 'Specifications', content: 'Product specifications' },
      { id: 3, title: 'Reviews', content: 'Product reviews' }
    ]}
    defaultActive={1}
  />
);

User Dashboard

const userDashboard = (
  <Tabs 
    tabsArray={[
      { id: 1, title: 'Overview', content: 'Dashboard overview' },
      { id: 2, title: 'Analytics', content: 'Analytics data' },
      { id: 3, title: 'Reports', content: 'Reports section' }
    ]}
    defaultActive={1}
  />
);

Documentation

const documentation = (
  <Tabs 
    tabsArray={[
      { id: 1, title: 'Getting Started', content: 'Getting started guide' },
      { id: 2, title: 'API Reference', content: 'API documentation' },
      { id: 3, title: 'Examples', content: 'Code examples' }
    ]}
    defaultActive={1}
  />
);

Best Practices

1. Clear Tab Labels

Use clear and descriptive tab labels.

// ✅ Good - Clear labels
const tabsArray = [
  { id: 1, title: 'General Settings', content: 'General settings content' },
  { id: 2, title: 'Security Settings', content: 'Security settings content' }
];


// ❌ Avoid - Unclear labels
const tabsArray = [
  { id: 1, title: 'Tab 1', content: 'Content 1' },
  { id: 2, title: 'Tab 2', content: 'Content 2' }
];

2. Logical Default Active

Set logical default active tab based on context.

// ✅ Good - Logical default
<Tabs defaultActive={1} /> // First tab


// ❌ Avoid - Random default
<Tabs defaultActive={3} /> // Third tab

3. Consistent Styling

Maintain consistent styling across tabs.

// ✅ Good - Consistent styling
<Tabs buttonClassName="standard-tab-style" />


// ❌ Avoid - Inconsistent styling
<Tabs buttonClassName="random-styles" />

4. Appropriate Content

Provide appropriate content for each tab.

// ✅ Good - Appropriate content
const tabsArray = [
  { id: 1, title: 'Settings', content: <SettingsForm /> }
];


// ❌ Avoid - Empty or inappropriate content
const tabsArray = [
  { id: 1, title: 'Settings', content: '' }
];

5. Accessible Navigation

Ensure tab navigation is accessible to all users.

// ✅ Good - Accessible
<Tabs />


// ❌ Avoid - Not accessible
<div>Tab content</div>

Customization

Custom Styling

You can customize the tabs appearance using CSS classes:

<Tabs 
  tabsArray={tabsArray}
  defaultActive={1}
  className="border border-gray-300 rounded-lg p-4"
/>

Different Themes

Use different themes for different contexts:

// Light theme
<Tabs className="bg-white border-gray-200" />


// Dark theme
<Tabs className="bg-gray-900 border-gray-700 text-white" />


// Brand theme
<Tabs className="bg-blue-50 border-blue-200" />

Size Variations

Use different sizes for different emphasis levels:

// Small tabs
<Tabs buttonClassName="text-sm" />


// Standard tabs
<Tabs buttonClassName="text-base" />


// Large tabs
<Tabs buttonClassName="text-lg" />

Advanced Usage

Dynamic Tab Content

Load tab content dynamically:

const [tabContent, setTabContent] = useState({});


useEffect(() => {
  // Load content for each tab
  loadTabContent().then(setTabContent);
}, []);

Conditional Tabs

Show/hide tabs based on conditions:

const getTabs = (userRole) => {
  const baseTabs = [
    { id: 1, title: 'General', content: 'General content' }
  ];
  
  if (userRole === 'admin') {
    baseTabs.push({ id: 2, title: 'Admin', content: 'Admin content' });
  }
  
  return baseTabs;
};

Tab State Management

Handle tab state:

const [activeTab, setActiveTab] = useState(1);


const handleTabChange = (tabId) => {
  setActiveTab(tabId);
  // Handle tab change
};
  • Button: For tab triggers
  • Panel: For tab content
  • Navigation: For navigation tabs
  • Menu: For menu tabs
  • Card: For tab containers

API Reference

For the complete API reference and advanced usage patterns, see the Tabs API documentation.

Edit this page on GitHub
previousPagination