Tab

Default

The default Tab component combines all subcomponents into a convenient wrapper. Use snippets (Svelte) or named slots (Astro) to define content for each tab.

AstroReactSvelteVue

PreviewCode

DashboardProfileNotificationsSettings

Dashboard

Welcome to your dashboard! Here's an overview of your account.

---
import Tab from "../tab.astro";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "dashboard", label: "Dashboard" },
  { id: "profile", label: "Profile" },
  { id: "notifications", label: "Notifications" },
  { id: "settings", label: "Settings" },
];
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="dashboard">
    <div slot="dashboard">
      <h3>Dashboard</h3>
      <p>Welcome to your dashboard! Here's an overview of your account.</p>
    </div>

    <div slot="profile">
      <h3>Profile</h3>
      <p>Update your profile information and preferences here.</p>
    </div>

    <div slot="notifications">
      <h3>Notifications</h3>
      <p>Manage your notification settings and view recent alerts.</p>
    </div>

    <div slot="settings">
      <h3>Settings</h3>
      <p>Customize your application settings and preferences.</p>
    </div>
  </Tab>
</div>

Dashboard

Welcome to your dashboard! Here's an overview of your account.

import { Tab } from "../Tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "dashboard", label: "Dashboard" },
  { id: "profile", label: "Profile" },
  { id: "notifications", label: "Notifications" },
  { id: "settings", label: "Settings" },
] as const;

export default function BasicDemo() {
  return (
    <div
      className={stack({
        gap: "xl",
        direction: "column",
        justify: "center",
        width: "100%",
      })}
    >
      <Tab
        items={tabItems}
        defaultTab="dashboard"
        panels={{
          dashboard: (
            <div>
              <h3>Dashboard</h3>
              <p>
                Welcome to your dashboard! Here&apos;s an overview of your
                account.
              </p>
            </div>
          ),
          profile: (
            <div>
              <h3>Profile</h3>
              <p>Update your profile information and preferences here.</p>
            </div>
          ),
          notifications: (
            <div>
              <h3>Notifications</h3>
              <p>Manage your notification settings and view recent alerts.</p>
            </div>
          ),
          settings: (
            <div>
              <h3>Settings</h3>
              <p>Customize your application settings and preferences.</p>
            </div>
          ),
        }}
      />
    </div>
  );
}

Dashboard

Welcome to your dashboard! Here's an overview of your account.

<script lang="ts">
  import { Tab } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  // Use 'as const' for type-safe snippet names and autocomplete on defaultTab
  const tabItems = [
    {
      id: "dashboard",
      label: "Dashboard",
    },
    {
      id: "profile",
      label: "Profile",
    },
    {
      id: "notifications",
      label: "Notifications",
    },
    {
      id: "settings",
      label: "Settings",
    },
  ] as const;
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="dashboard">
    {#snippet dashboard()}
      <div>
        <h3>Dashboard</h3>
        <p>Welcome to your dashboard! Here's an overview of your account.</p>
      </div>
    {/snippet}

    {#snippet profile()}
      <div>
        <h3>Profile</h3>
        <p>Update your profile information and preferences here.</p>
      </div>
    {/snippet}

    {#snippet notifications()}
      <div>
        <h3>Notifications</h3>
        <p>Manage your notification settings and view recent alerts.</p>
      </div>
    {/snippet}

    {#snippet settings()}
      <div>
        <h3>Settings</h3>
        <p>Customize your application settings and preferences.</p>
      </div>
    {/snippet}
  </Tab>
</div>

Dashboard

Welcome to your dashboard! Here's an overview of your account.

<script setup lang="ts">
import { Tab } from "@pindoba/vue-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "dashboard", label: "Dashboard" },
  { id: "profile", label: "Profile" },
  { id: "notifications", label: "Notifications" },
  { id: "settings", label: "Settings" },
] as const;
</script>

<template>
  <div
    :class="
      stack({
        gap: 'xl',
        direction: 'column',
        justify: 'center',
        width: '100%',
      })
    "
  >
    <Tab :items="tabItems" defaultTab="dashboard">
      <template #dashboard>
        <div>
          <h3>Dashboard</h3>
          <p>Welcome to your dashboard! Here's an overview of your account.</p>
        </div>
      </template>

      <template #profile>
        <div>
          <h3>Profile</h3>
          <p>Update your profile information and preferences here.</p>
        </div>
      </template>

      <template #notifications>
        <div>
          <h3>Notifications</h3>
          <p>Manage your notification settings and view recent alerts.</p>
        </div>
      </template>

      <template #settings>
        <div>
          <h3>Settings</h3>
          <p>Customize your application settings and preferences.</p>
        </div>
      </template>
    </Tab>
  </div>
</template>

Appearance

The strip renders segmented buttons by default. appearance="tabs" switches it to the minimal underline tab strip — transparent tabs, a 2px accent bar under the selected one, and a 1px baseline track. The bar is drawn inside each tab, so the underline look scrolls cleanly when the strip overflows; it’s the same visual language as Navigation’s appearance="tabs" and Radio’s appearance="tab".

AstroReactSvelteVue

PreviewCode

---
import Tab from "../tab.astro";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "activity", label: "Activity" },
  { id: "settings", label: "Settings" },
];

// Enough tabs to overflow the strip — the underline look scrolls cleanly: the
// 2px bar is inset in each tab and the baseline track spans the full
// scrollable width.
const manyItems = [
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
];
---

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Tab items={tabItems} defaultTab="overview" appearance="tabs">
    <p slot="overview">
      The underline tab strip — <code>appearance="tabs"</code>.
    </p>
    <p slot="activity">Recent activity across your account.</p>
    <p slot="settings">Customize your application settings.</p>
  </Tab>

  <Tab
    items={manyItems}
    defaultTab="analytics"
    appearance="tabs"
    fullWidth={false}
  >
    <p slot="analytics">
      Underline tabs scroll horizontally when the strip overflows.
    </p>
    <p slot="reports">Generate and export monthly reports.</p>
    <p slot="customers">Customer accounts and segments.</p>
    <p slot="products">Manage the product catalog.</p>
    <p slot="orders">Track and fulfill orders.</p>
    <p slot="inventory">Stock levels and warehouses.</p>
    <p slot="shipping">Shipping options and carriers.</p>
    <p slot="returns">Process customer returns.</p>
    <p slot="preferences">Store preferences.</p>
  </Tab>
</div>

import { Tab } from "../Tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "activity", label: "Activity" },
  { id: "settings", label: "Settings" },
] as const;

// Enough tabs to overflow the strip — the underline look scrolls cleanly: the
// 2px bar is inset in each tab and the baseline track spans the full
// scrollable width.
const manyItems = [
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
] as const;

export default function AppearanceDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <Tab
        items={tabItems}
        defaultTab="overview"
        appearance="tabs"
        panels={{
          overview: (
            <p>
              The underline tab strip — <code>appearance=&quot;tabs&quot;</code>
              .
            </p>
          ),
          activity: <p>Recent activity across your account.</p>,
          settings: <p>Customize your application settings.</p>,
        }}
      />

      <Tab
        items={manyItems}
        defaultTab="analytics"
        appearance="tabs"
        fullWidth={false}
        panels={{
          analytics: (
            <p>Underline tabs scroll horizontally when the strip overflows.</p>
          ),
          reports: <p>Generate and export monthly reports.</p>,
          customers: <p>Customer accounts and segments.</p>,
          products: <p>Manage the product catalog.</p>,
          orders: <p>Track and fulfill orders.</p>,
          inventory: <p>Stock levels and warehouses.</p>,
          shipping: <p>Shipping options and carriers.</p>,
          returns: <p>Process customer returns.</p>,
          preferences: <p>Store preferences.</p>,
        }}
      />
    </div>
  );
}

<script lang="ts">
  import { Tab } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  const tabItems = [
    { id: "overview", label: "Overview" },
    { id: "activity", label: "Activity" },
    { id: "settings", label: "Settings" },
  ] as const;

  // Enough tabs to overflow the strip — the underline look scrolls cleanly:
  // the 2px bar is inset in each tab and the baseline track spans the full
  // scrollable width.
  const manyItems = [
    { id: "analytics", label: "Analytics" },
    { id: "reports", label: "Reports" },
    { id: "customers", label: "Customers" },
    { id: "products", label: "Products" },
    { id: "orders", label: "Orders" },
    { id: "inventory", label: "Inventory" },
    { id: "shipping", label: "Shipping" },
    { id: "returns", label: "Returns" },
    { id: "preferences", label: "Preferences" },
  ] as const;
</script>

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <Tab items={tabItems} defaultTab="overview" appearance="tabs">
    {#snippet overview()}
      <p>The underline tab strip — <code>appearance="tabs"</code>.</p>
    {/snippet}
    {#snippet activity()}
      <p>Recent activity across your account.</p>
    {/snippet}
    {#snippet settings()}
      <p>Customize your application settings.</p>
    {/snippet}
  </Tab>

  <Tab
    items={manyItems}
    defaultTab="analytics"
    appearance="tabs"
    fullWidth={false}
  >
    {#snippet analytics()}
      <p>Underline tabs scroll horizontally when the strip overflows.</p>
    {/snippet}
    {#snippet reports()}
      <p>Generate and export monthly reports.</p>
    {/snippet}
    {#snippet customers()}
      <p>Customer accounts and segments.</p>
    {/snippet}
    {#snippet products()}
      <p>Manage the product catalog.</p>
    {/snippet}
    {#snippet orders()}
      <p>Track and fulfill orders.</p>
    {/snippet}
    {#snippet inventory()}
      <p>Stock levels and warehouses.</p>
    {/snippet}
    {#snippet shipping()}
      <p>Shipping options and carriers.</p>
    {/snippet}
    {#snippet returns()}
      <p>Process customer returns.</p>
    {/snippet}
    {#snippet preferences()}
      <p>Store preferences.</p>
    {/snippet}
  </Tab>
</div>

<script setup lang="ts">
import { Tab } from "@pindoba/vue-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "activity", label: "Activity" },
  { id: "settings", label: "Settings" },
] as const;

// Enough tabs to overflow the strip — the underline look scrolls cleanly: the
// 2px bar is inset in each tab and the baseline track spans the full
// scrollable width.
const manyItems = [
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
] as const;
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column', width: '100%' })">
    <Tab :items="tabItems" defaultTab="overview" appearance="tabs">
      <template #overview>
        <p>The underline tab strip — <code>appearance="tabs"</code>.</p>
      </template>
      <template #activity>
        <p>Recent activity across your account.</p>
      </template>
      <template #settings>
        <p>Customize your application settings.</p>
      </template>
    </Tab>

    <Tab
      :items="manyItems"
      defaultTab="analytics"
      appearance="tabs"
      :fullWidth="false"
    >
      <template #analytics>
        <p>Underline tabs scroll horizontally when the strip overflows.</p>
      </template>
      <template #reports>
        <p>Generate and export monthly reports.</p>
      </template>
      <template #customers>
        <p>Customer accounts and segments.</p>
      </template>
      <template #products>
        <p>Manage the product catalog.</p>
      </template>
      <template #orders>
        <p>Track and fulfill orders.</p>
      </template>
      <template #inventory>
        <p>Stock levels and warehouses.</p>
      </template>
      <template #shipping>
        <p>Shipping options and carriers.</p>
      </template>
      <template #returns>
        <p>Process customer returns.</p>
      </template>
      <template #preferences>
        <p>Store preferences.</p>
      </template>
    </Tab>
  </div>
</template>

Composable

For more control, use the individual components: TabGroup, TabNav, and TabPanel. This allows you to customize the layout and access the selected tab state.

AstroReactSvelteVue

PreviewCode

HomeAboutContact

This is the Home tab content. You can build custom layouts here.

---
import TabGroup from "../tab-group.astro";
import TabNav from "../tab-nav.astro";
import TabPanel from "../tab-panel.astro";
import { stack } from "@pindoba/styled-system/patterns";

const tabs = [
  { id: "home", label: "Home" },
  { id: "about", label: "About" },
  { id: "contact", label: "Contact" },
];
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <TabGroup defaultTab="home">
    <TabNav slot="tab-nav" tabs={tabs} selectedTab="home" />

    <div slot="panel">
      <TabPanel id="home" selected>
        <p>This is the Home tab content. You can build custom layouts here.</p>
      </TabPanel>

      <TabPanel id="about">
        <p>This is the About tab content with composable components.</p>
      </TabPanel>

      <TabPanel id="contact">
        <p>Contact us at: contact@example.com</p>
      </TabPanel>
    </div>
  </TabGroup>
</div>

This is the Home tab content. You can build custom layouts here.

Currently selected: home

import { useState } from "react";
import { TabGroup } from "../TabGroup";
import { TabNav } from "../TabNav";
import { TabPanel } from "../TabPanel";
import { stack } from "@pindoba/styled-system/patterns";

const tabs = [
  { id: "home", label: "Home" },
  { id: "about", label: "About" },
  { id: "contact", label: "Contact" },
];

export default function ComposableDemo() {
  const [selectedTab, setSelectedTab] = useState("home");

  return (
    <div
      className={stack({
        gap: "xl",
        direction: "column",
        justify: "center",
        width: "100%",
      })}
    >
      <TabGroup selectedTab={selectedTab} onTabChange={setSelectedTab}>
        <TabNav tabs={tabs} />

        <TabPanel id="home">
          <p>
            This is the Home tab content. You can build custom layouts here.
          </p>
        </TabPanel>

        <TabPanel id="about">
          <p>This is the About tab content with composable components.</p>
        </TabPanel>

        <TabPanel id="contact">
          <p>Contact us at: contact@example.com</p>
        </TabPanel>
      </TabGroup>

      <p>
        Currently selected: <strong>{selectedTab}</strong>
      </p>
    </div>
  );
}

This is the Home tab content. You can build custom layouts here.

Currently selected: home

<script lang="ts">
  import { TabGroup, TabNav, TabPanel } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  let selectedTab = $state("home");

  const tabs = [
    {
      id: "home",
      label: "Home",
    },
    {
      id: "about",
      label: "About",
    },
    {
      id: "contact",
      label: "Contact",
    },
  ];
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <TabGroup bind:selectedTab>
    <TabNav {tabs} />

    <TabPanel id="home">
      <p>This is the Home tab content. You can build custom layouts here.</p>
    </TabPanel>

    <TabPanel id="about">
      <p>This is the About tab content with composable components.</p>
    </TabPanel>

    <TabPanel id="contact">
      <p>Contact us at: contact@example.com</p>
    </TabPanel>
  </TabGroup>

  <p>Currently selected: <strong>{selectedTab}</strong></p>
</div>

This is the Home tab content. You can build custom layouts here.

Currently selected: home

<script setup lang="ts">
import { ref } from "vue";
import { TabGroup, TabNav, TabPanel } from "@pindoba/vue-tab";
import { stack } from "@pindoba/styled-system/patterns";

const selectedTab = ref("home");

const tabs = [
  { id: "home", label: "Home" },
  { id: "about", label: "About" },
  { id: "contact", label: "Contact" },
];
</script>

<template>
  <div
    :class="
      stack({
        gap: 'xl',
        direction: 'column',
        justify: 'center',
        width: '100%',
      })
    "
  >
    <TabGroup
      :selectedTab="selectedTab"
      :onTabChange="(id) => (selectedTab = id)"
    >
      <TabNav :tabs="tabs" />

      <TabPanel id="home">
        <p>This is the Home tab content. You can build custom layouts here.</p>
      </TabPanel>

      <TabPanel id="about">
        <p>This is the About tab content with composable components.</p>
      </TabPanel>

      <TabPanel id="contact">
        <p>Contact us at: contact@example.com</p>
      </TabPanel>
    </TabGroup>

    <p>
      Currently selected: <strong>{{ selectedTab }}</strong>
    </p>
  </div>
</template>

With Badges

Add badge indicators to tabs using the badge property on tab items. Useful for showing counts like unread messages or pending items.

AstroReactSvelteVue

PreviewCode

Inbox12Drafts3SentArchive

Inbox

You have 12 unread messages in your inbox.

---
import Tab from "../tab.astro";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "inbox", label: "Inbox", badge: "12" },
  { id: "drafts", label: "Drafts", badge: "3" },
  { id: "sent", label: "Sent" },
  { id: "archive", label: "Archive" },
];
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="inbox">
    <div slot="inbox">
      <h3>Inbox</h3>
      <p>You have 12 unread messages in your inbox.</p>
    </div>

    <div slot="drafts">
      <h3>Drafts</h3>
      <p>You have 3 draft messages waiting to be sent.</p>
    </div>

    <div slot="sent">
      <h3>Sent</h3>
      <p>View all messages you've sent.</p>
    </div>

    <div slot="archive">
      <h3>Archive</h3>
      <p>Access your archived messages.</p>
    </div>
  </Tab>
</div>

Inbox

You have 12 unread messages in your inbox.

import { Tab } from "../Tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "inbox", label: "Inbox", badge: "12" },
  { id: "drafts", label: "Drafts", badge: "3" },
  { id: "sent", label: "Sent" },
  { id: "archive", label: "Archive" },
] as const;

export default function WithBadgesDemo() {
  return (
    <div
      className={stack({
        gap: "xl",
        direction: "column",
        justify: "center",
        width: "100%",
      })}
    >
      <Tab
        items={tabItems}
        defaultTab="inbox"
        panels={{
          inbox: (
            <div>
              <h3>Inbox</h3>
              <p>You have 12 unread messages in your inbox.</p>
            </div>
          ),
          drafts: (
            <div>
              <h3>Drafts</h3>
              <p>You have 3 draft messages waiting to be sent.</p>
            </div>
          ),
          sent: (
            <div>
              <h3>Sent</h3>
              <p>View all messages you&apos;ve sent.</p>
            </div>
          ),
          archive: (
            <div>
              <h3>Archive</h3>
              <p>Access your archived messages.</p>
            </div>
          ),
        }}
      />
    </div>
  );
}

Inbox

You have 12 unread messages in your inbox.

<script lang="ts">
  import { Tab } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  const tabItems = [
    {
      id: "inbox",
      label: "Inbox",
      badge: "12",
    },
    {
      id: "drafts",
      label: "Drafts",
      badge: "3",
    },
    {
      id: "sent",
      label: "Sent",
    },
    {
      id: "archive",
      label: "Archive",
    },
  ] as const;
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="inbox">
    {#snippet inbox()}
      <div>
        <h3>Inbox</h3>
        <p>You have 12 unread messages in your inbox.</p>
      </div>
    {/snippet}

    {#snippet drafts()}
      <div>
        <h3>Drafts</h3>
        <p>You have 3 draft messages waiting to be sent.</p>
      </div>
    {/snippet}

    {#snippet sent()}
      <div>
        <h3>Sent</h3>
        <p>View all messages you've sent.</p>
      </div>
    {/snippet}

    {#snippet archive()}
      <div>
        <h3>Archive</h3>
        <p>Access your archived messages.</p>
      </div>
    {/snippet}
  </Tab>
</div>

Inbox

You have 12 unread messages in your inbox.

<script setup lang="ts">
import { Tab } from "@pindoba/vue-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "inbox", label: "Inbox", badge: "12" },
  { id: "drafts", label: "Drafts", badge: "3" },
  { id: "sent", label: "Sent" },
  { id: "archive", label: "Archive" },
] as const;
</script>

<template>
  <div
    :class="
      stack({
        gap: 'xl',
        direction: 'column',
        justify: 'center',
        width: '100%',
      })
    "
  >
    <Tab :items="tabItems" defaultTab="inbox">
      <template #inbox>
        <div>
          <h3>Inbox</h3>
          <p>You have 12 unread messages in your inbox.</p>
        </div>
      </template>

      <template #drafts>
        <div>
          <h3>Drafts</h3>
          <p>You have 3 draft messages waiting to be sent.</p>
        </div>
      </template>

      <template #sent>
        <div>
          <h3>Sent</h3>
          <p>View all messages you've sent.</p>
        </div>
      </template>

      <template #archive>
        <div>
          <h3>Archive</h3>
          <p>Access your archived messages.</p>
        </div>
      </template>
    </Tab>
  </div>
</template>

Disabled Tabs

Individual tabs can be disabled by setting disabled: true on the tab item. Disabled tabs are not focusable and cannot be selected.

AstroReactSvelteVue

PreviewCode

AvailableProcessingCompletedArchived

Available Items

These items are currently available and ready for action.

---
import Tab from "../tab.astro";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "available", label: "Available" },
  { id: "processing", label: "Processing", disabled: true },
  { id: "completed", label: "Completed" },
  { id: "archived", label: "Archived", disabled: true },
];
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="available">
    <div slot="available">
      <h3>Available Items</h3>
      <p>These items are currently available and ready for action.</p>
    </div>

    <div slot="processing">
      <h3>Processing</h3>
      <p>Items currently being processed (This tab is disabled).</p>
    </div>

    <div slot="completed">
      <h3>Completed Items</h3>
      <p>All completed items are listed here.</p>
    </div>

    <div slot="archived">
      <h3>Archived</h3>
      <p>Archived items (This tab is disabled).</p>
    </div>
  </Tab>
</div>

Available Items

These items are currently available and ready for action.

import { Tab } from "../Tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "available", label: "Available" },
  { id: "processing", label: "Processing", disabled: true },
  { id: "completed", label: "Completed" },
  { id: "archived", label: "Archived", disabled: true },
] as const;

export default function DisabledTabsDemo() {
  return (
    <div
      className={stack({
        gap: "xl",
        direction: "column",
        justify: "center",
        width: "100%",
      })}
    >
      <Tab
        items={tabItems}
        defaultTab="available"
        panels={{
          available: (
            <div>
              <h3>Available Items</h3>
              <p>These items are currently available and ready for action.</p>
            </div>
          ),
          processing: (
            <div>
              <h3>Processing</h3>
              <p>Items currently being processed (This tab is disabled).</p>
            </div>
          ),
          completed: (
            <div>
              <h3>Completed Items</h3>
              <p>All completed items are listed here.</p>
            </div>
          ),
          archived: (
            <div>
              <h3>Archived</h3>
              <p>Archived items (This tab is disabled).</p>
            </div>
          ),
        }}
      />
    </div>
  );
}

Available Items

These items are currently available and ready for action.

<script lang="ts">
  import { Tab } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  const tabItems = [
    {
      id: "available",
      label: "Available",
    },
    {
      id: "processing",
      label: "Processing",
      disabled: true,
    },
    {
      id: "completed",
      label: "Completed",
    },
    {
      id: "archived",
      label: "Archived",
      disabled: true,
    },
  ] as const;
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="available">
    {#snippet available()}
      <div>
        <h3>Available Items</h3>
        <p>These items are currently available and ready for action.</p>
      </div>
    {/snippet}

    {#snippet processing()}
      <div>
        <h3>Processing</h3>
        <p>Items currently being processed (This tab is disabled).</p>
      </div>
    {/snippet}

    {#snippet completed()}
      <div>
        <h3>Completed Items</h3>
        <p>All completed items are listed here.</p>
      </div>
    {/snippet}

    {#snippet archived()}
      <div>
        <h3>Archived</h3>
        <p>Archived items (This tab is disabled).</p>
      </div>
    {/snippet}
  </Tab>
</div>

Available Items

These items are currently available and ready for action.

<script setup lang="ts">
import { Tab } from "@pindoba/vue-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "available", label: "Available" },
  { id: "processing", label: "Processing", disabled: true },
  { id: "completed", label: "Completed" },
  { id: "archived", label: "Archived", disabled: true },
] as const;
</script>

<template>
  <div
    :class="
      stack({
        gap: 'xl',
        direction: 'column',
        justify: 'center',
        width: '100%',
      })
    "
  >
    <Tab :items="tabItems" defaultTab="available">
      <template #available>
        <div>
          <h3>Available Items</h3>
          <p>These items are currently available and ready for action.</p>
        </div>
      </template>

      <template #processing>
        <div>
          <h3>Processing</h3>
          <p>Items currently being processed (This tab is disabled).</p>
        </div>
      </template>

      <template #completed>
        <div>
          <h3>Completed Items</h3>
          <p>All completed items are listed here.</p>
        </div>
      </template>

      <template #archived>
        <div>
          <h3>Archived</h3>
          <p>Archived items (This tab is disabled).</p>
        </div>
      </template>
    </Tab>
  </div>
</template>

When there are more tabs than can fit in the available width, the navigation scrolls horizontally. A thin styled scrollbar appears to indicate overflow. Focus outlines and group borders remain fully visible during scrolling.

AstroReactSvelteVue

PreviewCode

---
import Tab from "../tab.astro";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
];
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="overview">
    <div slot="overview">
      <h3>Overview</h3>
      <p>A high-level summary of your store's performance and key metrics.</p>
    </div>

    <div slot="analytics">
      <h3>Analytics</h3>
      <p>Detailed traffic and conversion analytics for your store.</p>
    </div>

    <div slot="reports">
      <h3>Reports</h3>
      <p>Generate and download reports for accounting and compliance.</p>
    </div>

    <div slot="customers">
      <h3>Customers</h3>
      <p>Manage customer profiles, segments, and communication preferences.</p>
    </div>

    <div slot="products">
      <h3>Products</h3>
      <p>Add, edit, and organize your product catalog.</p>
    </div>

    <div slot="orders">
      <h3>Orders</h3>
      <p>View and process incoming orders and track fulfillment status.</p>
    </div>

    <div slot="inventory">
      <h3>Inventory</h3>
      <p>Monitor stock levels and set up reorder alerts.</p>
    </div>

    <div slot="shipping">
      <h3>Shipping</h3>
      <p>Configure shipping zones, rates, and carrier integrations.</p>
    </div>

    <div slot="returns">
      <h3>Returns</h3>
      <p>Process return requests and manage refund policies.</p>
    </div>

    <div slot="preferences">
      <h3>Preferences</h3>
      <p>Configure store preferences, payments, and integrations.</p>
    </div>
  </Tab>
</div>

import { Tab } from "../Tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
] as const;

export default function ScrollingDemo() {
  return (
    <div
      className={stack({
        gap: "xl",
        direction: "column",
        justify: "center",
        width: "100%",
      })}
    >
      <Tab
        items={tabItems}
        defaultTab="overview"
        panels={{
          overview: (
            <div>
              <h3>Overview</h3>
              <p>
                A high-level summary of your store&apos;s performance and key
                metrics.
              </p>
            </div>
          ),
          analytics: (
            <div>
              <h3>Analytics</h3>
              <p>Detailed traffic and conversion analytics for your store.</p>
            </div>
          ),
          reports: (
            <div>
              <h3>Reports</h3>
              <p>
                Generate and download reports for accounting and compliance.
              </p>
            </div>
          ),
          customers: (
            <div>
              <h3>Customers</h3>
              <p>
                Manage customer profiles, segments, and communication
                preferences.
              </p>
            </div>
          ),
          products: (
            <div>
              <h3>Products</h3>
              <p>Add, edit, and organize your product catalog.</p>
            </div>
          ),
          orders: (
            <div>
              <h3>Orders</h3>
              <p>
                View and process incoming orders and track fulfillment status.
              </p>
            </div>
          ),
          inventory: (
            <div>
              <h3>Inventory</h3>
              <p>Monitor stock levels and set up reorder alerts.</p>
            </div>
          ),
          shipping: (
            <div>
              <h3>Shipping</h3>
              <p>Configure shipping zones, rates, and carrier integrations.</p>
            </div>
          ),
          returns: (
            <div>
              <h3>Returns</h3>
              <p>Process return requests and manage refund policies.</p>
            </div>
          ),
          preferences: (
            <div>
              <h3>Preferences</h3>
              <p>Configure store preferences, payments, and integrations.</p>
            </div>
          ),
        }}
      />
    </div>
  );
}

<script lang="ts">
  import { Tab } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  const tabItems = [
    { id: "overview", label: "Overview" },
    { id: "analytics", label: "Analytics" },
    { id: "reports", label: "Reports" },
    { id: "customers", label: "Customers" },
    { id: "products", label: "Products" },
    { id: "orders", label: "Orders" },
    { id: "inventory", label: "Inventory" },
    { id: "shipping", label: "Shipping" },
    { id: "returns", label: "Returns" },
    { id: "preferences", label: "Preferences" },
  ] as const;
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="overview">
    {#snippet overview()}
      <div>
        <h3>Overview</h3>
        <p>A high-level summary of your store's performance and key metrics.</p>
      </div>
    {/snippet}

    {#snippet analytics()}
      <div>
        <h3>Analytics</h3>
        <p>Detailed traffic and conversion analytics for your store.</p>
      </div>
    {/snippet}

    {#snippet reports()}
      <div>
        <h3>Reports</h3>
        <p>Generate and download reports for accounting and compliance.</p>
      </div>
    {/snippet}

    {#snippet customers()}
      <div>
        <h3>Customers</h3>
        <p>
          Manage customer profiles, segments, and communication preferences.
        </p>
      </div>
    {/snippet}

    {#snippet products()}
      <div>
        <h3>Products</h3>
        <p>Add, edit, and organize your product catalog.</p>
      </div>
    {/snippet}

    {#snippet orders()}
      <div>
        <h3>Orders</h3>
        <p>View and process incoming orders and track fulfillment status.</p>
      </div>
    {/snippet}

    {#snippet inventory()}
      <div>
        <h3>Inventory</h3>
        <p>Monitor stock levels and set up reorder alerts.</p>
      </div>
    {/snippet}

    {#snippet shipping()}
      <div>
        <h3>Shipping</h3>
        <p>Configure shipping zones, rates, and carrier integrations.</p>
      </div>
    {/snippet}

    {#snippet returns()}
      <div>
        <h3>Returns</h3>
        <p>Process return requests and manage refund policies.</p>
      </div>
    {/snippet}

    {#snippet preferences()}
      <div>
        <h3>Preferences</h3>
        <p>Configure store preferences, payments, and integrations.</p>
      </div>
    {/snippet}
  </Tab>
</div>

<script setup lang="ts">
import { Tab } from "@pindoba/vue-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
] as const;
</script>

<template>
  <div
    :class="
      stack({
        gap: 'xl',
        direction: 'column',
        justify: 'center',
        width: '100%',
      })
    "
  >
    <Tab :items="tabItems" defaultTab="overview">
      <template #overview>
        <div>
          <h3>Overview</h3>
          <p>
            A high-level summary of your store's performance and key metrics.
          </p>
        </div>
      </template>

      <template #analytics>
        <div>
          <h3>Analytics</h3>
          <p>Detailed traffic and conversion analytics for your store.</p>
        </div>
      </template>

      <template #reports>
        <div>
          <h3>Reports</h3>
          <p>Generate and download reports for accounting and compliance.</p>
        </div>
      </template>

      <template #customers>
        <div>
          <h3>Customers</h3>
          <p>
            Manage customer profiles, segments, and communication preferences.
          </p>
        </div>
      </template>

      <template #products>
        <div>
          <h3>Products</h3>
          <p>Add, edit, and organize your product catalog.</p>
        </div>
      </template>

      <template #orders>
        <div>
          <h3>Orders</h3>
          <p>View and process incoming orders and track fulfillment status.</p>
        </div>
      </template>

      <template #inventory>
        <div>
          <h3>Inventory</h3>
          <p>Monitor stock levels and set up reorder alerts.</p>
        </div>
      </template>

      <template #shipping>
        <div>
          <h3>Shipping</h3>
          <p>Configure shipping zones, rates, and carrier integrations.</p>
        </div>
      </template>

      <template #returns>
        <div>
          <h3>Returns</h3>
          <p>Process return requests and manage refund policies.</p>
        </div>
      </template>

      <template #preferences>
        <div>
          <h3>Preferences</h3>
          <p>Configure store preferences, payments, and integrations.</p>
        </div>
      </template>
    </Tab>
  </div>
</template>

With Action Slots

Use leftAction and rightAction snippets to place fixed elements on either side of the scrollable tab strip. The action slots stay anchored while the tabs scroll freely behind them. Use fullWidth={false} to let tabs use their natural width and trigger scrolling.

AstroReactSvelteVue

PreviewCode

---
import { css } from "@pindoba/styled-system/css";
import TabGroup from "../tab-group.astro";
import TabNav from "../tab-nav.astro";
import TabPanel from "../tab-panel.astro";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
];
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <TabGroup defaultTab="overview">
    <TabNav
      slot="tab-nav"
      tabs={tabItems}
      selectedTab="overview"
      fullWidth={false}
    >
      <Button slot="left-action" emphasis="secondary" aria-label="Scroll left"
        >Action 1</Button
      >
      <div
        class={css({
          display: "flex",
          gap: "xs",
        })}
        slot="right-action"
      >
        <Button emphasis="secondary" shape="square" aria-label="Add tab"
          >+</Button
        >
        <Button slot="right-action" emphasis="secondary" aria-label="Add tab"
          >Action 2</Button
        >
      </div>
    </TabNav>
    <div slot="panel">
      <TabPanel id="overview" selected>
        <div>
          <h3>Overview</h3>
          <p>
            A high-level summary of your store's performance and key metrics.
          </p>
        </div>
      </TabPanel>
      <TabPanel id="analytics">
        <div>
          <h3>Analytics</h3>
          <p>Detailed traffic and conversion analytics for your store.</p>
        </div>
      </TabPanel>
      <TabPanel id="reports">
        <div>
          <h3>Reports</h3>
          <p>Generate and download reports for accounting and compliance.</p>
        </div>
      </TabPanel>
      <TabPanel id="customers">
        <div>
          <h3>Customers</h3>
          <p>
            Manage customer profiles, segments, and communication preferences.
          </p>
        </div>
      </TabPanel>
      <TabPanel id="products">
        <div>
          <h3>Products</h3>
          <p>Add, edit, and organize your product catalog.</p>
        </div>
      </TabPanel>
      <TabPanel id="orders">
        <div>
          <h3>Orders</h3>
          <p>View and process incoming orders and track fulfillment status.</p>
        </div>
      </TabPanel>
      <TabPanel id="inventory">
        <div>
          <h3>Inventory</h3>
          <p>Monitor stock levels and set up reorder alerts.</p>
        </div>
      </TabPanel>
      <TabPanel id="shipping">
        <div>
          <h3>Shipping</h3>
          <p>Configure shipping zones, rates, and carrier integrations.</p>
        </div>
      </TabPanel>
      <TabPanel id="returns">
        <div>
          <h3>Returns</h3>
          <p>Process return requests and manage refund policies.</p>
        </div>
      </TabPanel>
      <TabPanel id="preferences">
        <div>
          <h3>Preferences</h3>
          <p>Configure store preferences, payments, and integrations.</p>
        </div>
      </TabPanel>
    </div>
  </TabGroup>
</div>

import { Tab } from "../Tab";
import Button from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
] as const;

export default function WithActionsDemo() {
  return (
    <div
      className={stack({
        gap: "xl",
        direction: "column",
        justify: "center",
        width: "100%",
      })}
    >
      <Tab
        items={tabItems}
        fullWidth={false}
        defaultTab="overview"
        leftAction={
          <Button emphasis="secondary" aria-label="Scroll left">
            Action 1
          </Button>
        }
        rightAction={
          <div className={css({ display: "flex", gap: "xs" })}>
            <Button emphasis="secondary" shape="square" aria-label="Add tab">
              +
            </Button>
            <Button emphasis="secondary" aria-label="Add tab">
              Action 2
            </Button>
          </div>
        }
        panels={{
          overview: (
            <div>
              <h3>Overview</h3>
              <p>
                A high-level summary of your store&apos;s performance and key
                metrics.
              </p>
            </div>
          ),
          analytics: (
            <div>
              <h3>Analytics</h3>
              <p>Detailed traffic and conversion analytics for your store.</p>
            </div>
          ),
          reports: (
            <div>
              <h3>Reports</h3>
              <p>
                Generate and download reports for accounting and compliance.
              </p>
            </div>
          ),
          customers: (
            <div>
              <h3>Customers</h3>
              <p>
                Manage customer profiles, segments, and communication
                preferences.
              </p>
            </div>
          ),
          products: (
            <div>
              <h3>Products</h3>
              <p>Add, edit, and organize your product catalog.</p>
            </div>
          ),
          orders: (
            <div>
              <h3>Orders</h3>
              <p>
                View and process incoming orders and track fulfillment status.
              </p>
            </div>
          ),
          inventory: (
            <div>
              <h3>Inventory</h3>
              <p>Monitor stock levels and set up reorder alerts.</p>
            </div>
          ),
          shipping: (
            <div>
              <h3>Shipping</h3>
              <p>Configure shipping zones, rates, and carrier integrations.</p>
            </div>
          ),
          returns: (
            <div>
              <h3>Returns</h3>
              <p>Process return requests and manage refund policies.</p>
            </div>
          ),
          preferences: (
            <div>
              <h3>Preferences</h3>
              <p>Configure store preferences, payments, and integrations.</p>
            </div>
          ),
        }}
      />
    </div>
  );
}

<script lang="ts">
  import { Tab } from "../index.js";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  const tabItems = [
    { id: "overview", label: "Overview" },
    { id: "analytics", label: "Analytics" },
    { id: "reports", label: "Reports" },
    { id: "customers", label: "Customers" },
    { id: "products", label: "Products" },
    { id: "orders", label: "Orders" },
    { id: "inventory", label: "Inventory" },
    { id: "shipping", label: "Shipping" },
    { id: "returns", label: "Returns" },
    { id: "preferences", label: "Preferences" },
  ] as const;
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} fullWidth={false} defaultTab="overview">
    {#snippet leftAction()}
      <Button emphasis="secondary" aria-label="Scroll left">Action 1</Button>
    {/snippet}

    {#snippet rightAction()}
      <div
        class={css({
          display: "flex",
          gap: "xs",
        })}
      >
        <Button emphasis="secondary" shape="square" aria-label="Add tab"
          >+</Button
        >
        <Button emphasis="secondary" aria-label="Add tab">Action 2</Button>
      </div>
    {/snippet}

    {#snippet overview()}
      <div>
        <h3>Overview</h3>
        <p>A high-level summary of your store's performance and key metrics.</p>
      </div>
    {/snippet}

    {#snippet analytics()}
      <div>
        <h3>Analytics</h3>
        <p>Detailed traffic and conversion analytics for your store.</p>
      </div>
    {/snippet}

    {#snippet reports()}
      <div>
        <h3>Reports</h3>
        <p>Generate and download reports for accounting and compliance.</p>
      </div>
    {/snippet}

    {#snippet customers()}
      <div>
        <h3>Customers</h3>
        <p>
          Manage customer profiles, segments, and communication preferences.
        </p>
      </div>
    {/snippet}

    {#snippet products()}
      <div>
        <h3>Products</h3>
        <p>Add, edit, and organize your product catalog.</p>
      </div>
    {/snippet}

    {#snippet orders()}
      <div>
        <h3>Orders</h3>
        <p>View and process incoming orders and track fulfillment status.</p>
      </div>
    {/snippet}

    {#snippet inventory()}
      <div>
        <h3>Inventory</h3>
        <p>Monitor stock levels and set up reorder alerts.</p>
      </div>
    {/snippet}

    {#snippet shipping()}
      <div>
        <h3>Shipping</h3>
        <p>Configure shipping zones, rates, and carrier integrations.</p>
      </div>
    {/snippet}

    {#snippet returns()}
      <div>
        <h3>Returns</h3>
        <p>Process return requests and manage refund policies.</p>
      </div>
    {/snippet}

    {#snippet preferences()}
      <div>
        <h3>Preferences</h3>
        <p>Configure store preferences, payments, and integrations.</p>
      </div>
    {/snippet}
  </Tab>
</div>

<script setup lang="ts">
import { Tab } from "@pindoba/vue-tab";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const tabItems = [
  { id: "overview", label: "Overview" },
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "customers", label: "Customers" },
  { id: "products", label: "Products" },
  { id: "orders", label: "Orders" },
  { id: "inventory", label: "Inventory" },
  { id: "shipping", label: "Shipping" },
  { id: "returns", label: "Returns" },
  { id: "preferences", label: "Preferences" },
] as const;
</script>

<template>
  <div
    :class="
      stack({
        gap: 'xl',
        direction: 'column',
        justify: 'center',
        width: '100%',
      })
    "
  >
    <Tab :items="tabItems" :fullWidth="false" defaultTab="overview">
      <template #leftAction>
        <Button emphasis="secondary" aria-label="Scroll left">Action 1</Button>
      </template>

      <template #rightAction>
        <div :class="css({ display: 'flex', gap: 'xs' })">
          <Button emphasis="secondary" shape="square" aria-label="Add tab">
            +
          </Button>
          <Button emphasis="secondary" aria-label="Add tab">Action 2</Button>
        </div>
      </template>

      <template #overview>
        <div>
          <h3>Overview</h3>
          <p>
            A high-level summary of your store's performance and key metrics.
          </p>
        </div>
      </template>

      <template #analytics>
        <div>
          <h3>Analytics</h3>
          <p>Detailed traffic and conversion analytics for your store.</p>
        </div>
      </template>

      <template #reports>
        <div>
          <h3>Reports</h3>
          <p>Generate and download reports for accounting and compliance.</p>
        </div>
      </template>

      <template #customers>
        <div>
          <h3>Customers</h3>
          <p>
            Manage customer profiles, segments, and communication preferences.
          </p>
        </div>
      </template>

      <template #products>
        <div>
          <h3>Products</h3>
          <p>Add, edit, and organize your product catalog.</p>
        </div>
      </template>

      <template #orders>
        <div>
          <h3>Orders</h3>
          <p>View and process incoming orders and track fulfillment status.</p>
        </div>
      </template>

      <template #inventory>
        <div>
          <h3>Inventory</h3>
          <p>Monitor stock levels and set up reorder alerts.</p>
        </div>
      </template>

      <template #shipping>
        <div>
          <h3>Shipping</h3>
          <p>Configure shipping zones, rates, and carrier integrations.</p>
        </div>
      </template>

      <template #returns>
        <div>
          <h3>Returns</h3>
          <p>Process return requests and manage refund policies.</p>
        </div>
      </template>

      <template #preferences>
        <div>
          <h3>Preferences</h3>
          <p>Configure store preferences, payments, and integrations.</p>
        </div>
      </template>
    </Tab>
  </div>
</template>

Custom Styling

Use the passThrough prop to customize styles for any tab slot — root, nav, navScroll, panel, panelsContainer, and panelEmpty. Each key accepts a Panda CSS SystemStyleObject.

AstroReactSvelteVue

PreviewCode

SummaryMetricsExports

Summary

This tab component uses custom styling via the passThrough prop.

---
import Tab from "../tab.astro";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "summary", label: "Summary" },
  { id: "metrics", label: "Metrics" },
  { id: "exports", label: "Exports" },
];

const customStyles = {
  root: {
    style: {
      border: "2px solid",
      borderColor: "accent.500",
      borderRadius: "lg",
      padding: "4",
      bg: "neutral.50",
      _dark: {
        bg: "neutral.900",
      },
    },
  },
  nav: {
    style: {
      mb: "4",
    },
  },
  panel: {
    style: {
      padding: "6",
      bg: "white",
      borderRadius: "md",
      boxShadow: "sm",
      _dark: {
        bg: "neutral.800",
      },
    },
  },
  panelsContainer: {
    style: {
      mt: "4",
    },
  },
};
---

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="summary" passThrough={customStyles}>
    <div slot="summary">
      <h3>Summary</h3>
      <p>This tab component uses custom styling via the passThrough prop.</p>
    </div>

    <div slot="metrics">
      <h3>Metrics</h3>
      <p>View your metrics data with custom styled panels.</p>
    </div>

    <div slot="exports">
      <h3>Exports</h3>
      <p>Generate and view exports with enhanced styling.</p>
    </div>
  </Tab>
</div>

Summary

This tab component uses custom styling via the passThrough prop.

import { Tab, type TabProps } from "../Tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "summary", label: "Summary" },
  { id: "metrics", label: "Metrics" },
  { id: "exports", label: "Exports" },
] as const;

const customStyles: TabProps["passThrough"] = {
  root: {
    style: {
      border: "2px solid",
      borderColor: "accent.500",
      borderRadius: "lg",
      padding: "4",
      bg: "neutral.50",
      _dark: { bg: "neutral.900" },
    },
  },
  nav: {
    style: { mb: "4" },
  },
  panel: {
    style: {
      padding: "6",
      bg: "white",
      borderRadius: "md",
      boxShadow: "sm",
      _dark: { bg: "neutral.800" },
    },
  },
  panelsContainer: {
    style: { mt: "4" },
  },
};

export default function CustomStylingDemo() {
  return (
    <div
      className={stack({
        gap: "xl",
        direction: "column",
        justify: "center",
        width: "100%",
      })}
    >
      <Tab
        items={tabItems}
        defaultTab="summary"
        passThrough={customStyles}
        panels={{
          summary: (
            <div>
              <h3>Summary</h3>
              <p>
                This tab component uses custom styling via the passThrough prop.
              </p>
            </div>
          ),
          metrics: (
            <div>
              <h3>Metrics</h3>
              <p>View your metrics data with custom styled panels.</p>
            </div>
          ),
          exports: (
            <div>
              <h3>Exports</h3>
              <p>Generate and view exports with enhanced styling.</p>
            </div>
          ),
        }}
      />
    </div>
  );
}

Summary

This tab component uses custom styling via the passThrough prop.

<script lang="ts">
  import { Tab } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  const tabItems = [
    {
      id: "summary",
      label: "Summary",
    },
    {
      id: "metrics",
      label: "Metrics",
    },
    {
      id: "exports",
      label: "Exports",
    },
  ] as const;

  // Custom styling using passThrough
  const customStyles = {
    root: {
      style: {
        border: "2px solid",
        borderColor: "accent.500",
        borderRadius: "lg",
        padding: "4",
        bg: "neutral.50",
        _dark: {
          bg: "neutral.900",
        },
      },
    },
    nav: {
      style: {
        mb: "4",
      },
    },
    panel: {
      style: {
        padding: "6",
        bg: "white",
        borderRadius: "md",
        boxShadow: "sm",
        _dark: {
          bg: "neutral.800",
        },
      },
    },
    panelsContainer: {
      style: {
        mt: "4",
      },
    },
  };
</script>

<div
  class={stack({
    gap: "xl",
    direction: "column",
    justify: "center",
    width: "100%",
  })}
>
  <Tab items={tabItems} defaultTab="summary" passThrough={customStyles}>
    {#snippet summary()}
      <div>
        <h3>Summary</h3>
        <p>This tab component uses custom styling via the passThrough prop.</p>
      </div>
    {/snippet}

    {#snippet metrics()}
      <div>
        <h3>Metrics</h3>
        <p>View your metrics data with custom styled panels.</p>
      </div>
    {/snippet}

    {#snippet exports()}
      <div>
        <h3>Exports</h3>
        <p>Generate and view exports with enhanced styling.</p>
      </div>
    {/snippet}
  </Tab>
</div>

Summary

This tab component uses custom styling via the passThrough prop.

<script setup lang="ts">
import { Tab } from "@pindoba/vue-tab";
import { stack } from "@pindoba/styled-system/patterns";

const tabItems = [
  { id: "summary", label: "Summary" },
  { id: "metrics", label: "Metrics" },
  { id: "exports", label: "Exports" },
] as const;

// Custom styling using passThrough
const customStyles = {
  root: {
    style: {
      border: "2px solid",
      borderColor: "accent.500",
      borderRadius: "lg",
      padding: "4",
      bg: "neutral.50",
      _dark: {
        bg: "neutral.900",
      },
    },
  },
  nav: {
    style: {
      mb: "4",
    },
  },
  panel: {
    style: {
      padding: "6",
      bg: "white",
      borderRadius: "md",
      boxShadow: "sm",
      _dark: {
        bg: "neutral.800",
      },
    },
  },
  panelsContainer: {
    style: {
      mt: "4",
    },
  },
};
</script>

<template>
  <div
    :class="
      stack({
        gap: 'xl',
        direction: 'column',
        justify: 'center',
        width: '100%',
      })
    "
  >
    <Tab :items="tabItems" defaultTab="summary" :passThrough="customStyles">
      <template #summary>
        <div>
          <h3>Summary</h3>
          <p>
            This tab component uses custom styling via the passThrough prop.
          </p>
        </div>
      </template>

      <template #metrics>
        <div>
          <h3>Metrics</h3>
          <p>View your metrics data with custom styled panels.</p>
        </div>
      </template>

      <template #exports>
        <div>
          <h3>Exports</h3>
          <p>Generate and view exports with enhanced styling.</p>
        </div>
      </template>
    </Tab>
  </div>
</template>

Accessibility

The tab component includes full keyboard navigation support:

Tab: Move focus to the active tab or first tab
Arrow Keys: Navigate between tabs (handled by the Radio component)
Home: Jump to the first tab
End: Jump to the last tab
Space/Enter: Activate the focused tab (via Radio)

All ARIA attributes are properly set for screen reader compatibility.

#Default

Dashboard

#Appearance

#Composable

#With Badges

Inbox

#Disabled Tabs

Available Items

#Scrolling Navigation

Overview

#With Action Slots

Overview

#Custom Styling

Summary

Default

Appearance

Composable

With Badges

Disabled Tabs

Scrolling Navigation

With Action Slots

Custom Styling