Tabs

Navigate easily between views within the same context.

By organizing frequently used features within a tab structure, users can quickly switch between different sections without navigating through multiple screens or complex menu hierarchies.

Tabs frequently serve as a mean of secondary navigation on desktop, but in mobile app, they often become the primary navigation layer due to their compact vertical design.

Anatomy

import { Tabs } from '@onwo/ui';

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab>...</Tabs.Tab>
    <Tabs.Tab>...</Tabs.Tab>
    <Tabs.Tab>...</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>...</Tabs.Panel>
    <Tabs.Panel>...</Tabs.Panel>
    <Tabs.Panel>...</Tabs.Panel>
  </Tabs.Panels>
</Tabs.Root>

Default

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab>First tab</Tabs.Tab>
    <Tabs.Tab>Second tab</Tabs.Tab>
    <Tabs.Tab>Third tab</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>Hello</Tabs.Panel>
    <Tabs.Panel>Hi</Tabs.Panel>
    <Tabs.Panel>Bonjour</Tabs.Panel>
  </Tabs.Panels>
</Tabs.Root>

With pills

<Tabs.Root>
  <Tabs.List>
    <Tabs.Pill>First tab</Tabs.Pill>
    <Tabs.Pill>Second tab</Tabs.Pill>
    <Tabs.Pill>Third tab</Tabs.Pill>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>Hello</Tabs.Panel>
    <Tabs.Panel>Hi</Tabs.Panel>
    <Tabs.Panel>Bonjour</Tabs.Panel>
  </Tabs.Panels>
</Tabs.Root>

Sizes

<div class="grid grid-cols-2 gap-4">
  <Tabs.Root>
    <Tabs.List size="sm">
      <Tabs.Pill>Pill-sm</Tabs.Pill>
      <Tabs.Pill>Pill-sm</Tabs.Pill>
      <Tabs.Pill>Pill-sm</Tabs.Pill>
    </Tabs.List>
  </Tabs.Root>
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Pill>Pill-md</Tabs.Pill>
      <Tabs.Pill>Pill-md</Tabs.Pill>
      <Tabs.Pill>Pill-md</Tabs.Pill>
    </Tabs.List>
  </Tabs.Root>
  <Tabs.Root>
    <Tabs.List size="sm">
      <Tabs.Tab>Tab-sm</Tabs.Tab>
      <Tabs.Tab>Tab-sm</Tabs.Tab>
      <Tabs.Tab>Tab-sm</Tabs.Tab>
    </Tabs.List>
  </Tabs.Root>
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Tab>Tab-md</Tabs.Tab>
      <Tabs.Tab>Tab-md</Tabs.Tab>
      <Tabs.Tab>Tab-md</Tabs.Tab>
    </Tabs.List>
  </Tabs.Root>
</div>

Custom styling

<div class="flex flex-col gap-4">
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Tab class="after:bg-success hover:text-success data-selected:text-success">
        Green tab
      </Tabs.Tab>
      <Tabs.Tab disabled>Disabled tab</Tabs.Tab>
      <Tabs.Tab class="after:bg-success hover:text-success data-selected:text-success">
        Green tab
      </Tabs.Tab>
    </Tabs.List>
  </Tabs.Root>
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Pill class="hover:bg-success/30 data-selected:bg-success/30">Green pill</Tabs.Pill>
      <Tabs.Pill disabled>Disabled pill</Tabs.Pill>
      <Tabs.Pill class="hover:bg-success/30 data-selected:bg-success/30">Green tab pill</Tabs.Pill>
    </Tabs.List>
  </Tabs.Root>
</div>

WIP