components

Tabs

Tabs organize content into separate views where only one view is visible at a time. They allow users to switch between related sections without leaving the page. Use the Tabs component with a tabs prop containing a TabBar of Tab elements, and provide corresponding TabPanel children for each tab's content.

Import

import { Tabs, Tab, TabBar, TabPanel } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Organize related content into separate views within the same page context.
+Switch between different aspects of the same entity (e.g. Profile, Settings, Activity).
+Reduce page complexity by showing one section at a time.

When not to use

−For step-by-step workflows or wizards — tabs imply non-sequential content.
−For navigation between unrelated pages — use SideNavigation or top-level routing.
−When all content should be visible simultaneously — use Cards or Dividers.

Examples

Code Samples

Basic Tabs

A tabbed interface using the Tabs component with a TabBar passed via the tabs prop and TabPanel children for each view.

import { Tabs, Tab, TabBar, TabPanel } from "@skedulo/breeze-ui-react";

export default function BasicTabs() {
  return (
    <Tabs
      tabs={
        <TabBar>
          <Tab>Overview</Tab>
          <Tab>Details</Tab>
          <Tab>Activity</Tab>
        </TabBar>
      }
    >
      <TabPanel>
        <div className="p-4">
          <p>This is the Overview tab content.</p>
        </div>
      </TabPanel>
      <TabPanel>
        <div className="p-4">
          <p>This is the Details tab content.</p>
        </div>
      </TabPanel>
      <TabPanel>
        <div className="p-4">
          <p>This is the Activity tab content.</p>
        </div>
      </TabPanel>
    </Tabs>
  );
}

Tabs with Rich Content

Tabs containing more complex content such as profile information, settings, and notification lists.

import { Tabs, Tab, TabBar, TabPanel } from "@skedulo/breeze-ui-react";

export default function RichTabs() {
  return (
    <Tabs
      tabs={
        <TabBar>
          <Tab>Profile</Tab>
          <Tab>Settings</Tab>
          <Tab>Notifications</Tab>
        </TabBar>
      }
    >
      <TabPanel>
        <div className="p-4 space-y-3">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-semibold">
              JD
            </div>
            <div>
              <p className="text-sm font-medium text-gray-900">Jane Doe</p>
              <p className="text-xs text-gray-500">jane.doe@example.com</p>
            </div>
          </div>
          <p className="text-sm text-gray-600">
            Profile information and account details are shown here.
          </p>
        </div>
      </TabPanel>
      <TabPanel>
        <div className="p-4 space-y-2">
          <p className="text-sm font-medium text-gray-700">Preferences</p>
          <p className="text-sm text-gray-600">
            Configure your application settings and default behaviors.
          </p>
        </div>
      </TabPanel>
      <TabPanel>
        <div className="p-4 space-y-2">
          <p className="text-sm font-medium text-gray-700">Recent</p>
          <ul className="text-sm text-gray-600 space-y-1">
            <li>New comment on your post - 2 min ago</li>
            <li>Task assigned to you - 1 hour ago</li>
            <li>Weekly report generated - 3 hours ago</li>
          </ul>
        </div>
      </TabPanel>
    </Tabs>
  );
}

Guidelines

Do

✓Keep the number of tabs to 2-5 for scannability.
✓Use short, descriptive tab labels (1-2 words).
✓Ensure TabPanel order matches Tab order in the TabBar.
✓Place the most commonly accessed tab first.

Don't

✗Don't use tabs for a single section — there should be at least 2 tabs.
✗Don't nest Tabs components inside each other.
✗Don't use tabs to hide critical information the user needs to see.
✗Don't dynamically add/remove tabs during a session — it disorients users.

API Reference

Prop	Type	Default	Description
tabs*	ReactNode	—	A TabBar element containing Tab children that serve as the tab navigation. Pass this as a JSX element via the tabs prop.
children*	ReactNode	—	TabPanel elements corresponding to each Tab. The order of TabPanels must match the order of Tabs in the TabBar.

Related Components

Card Navigation Modal