The Tab component is designed to organize content into separate views where only one section is visible at a time. It’s ideal for dashboards, forms, or any interface that needs segmented content.

• Orientation: Supports horizontal (default) and vertical tabs.
• Custom content: Each tab can contain any content including icons, components, or custom snippets.
• Transitions: Smooth entry and exit animations using transitions like fade or fly.
• Scrollable: Tab headers can scroll if there are many options.
• Styling: Supports line styles, hover effects, and theme-based colors.

Usage Example

Preview

☆ label1 label2

test1

☆ label1 label2 label3 label4 label5 label6 label7 label8 label9 label10

test1

☆ label1 label2 label3 label4 label5

test1

Code

<script lang="ts">
  import { Button, themeConfig, Separator, Tab, Card } from "@fefade-ui/svelte"
  import { fade, fly } from "svelte/transition"

  const theme = $derived(themeConfig())

  let activeTab = $state({
    tab1: "1",
    tab2: "1",
    tab3: "1",
    tab4: "1",
    tab5: "1"
  })

  const tabs = Array.from({ length: 10 }, (_, i) => {
    const id = (i + 1).toString()
    return {
      id,
      label: `label${id}`,
      content: `test${id}`,
      ...(i === 0 && {
        icon: String.fromCharCode(9734)
      })
    }
  })

  function handle(tab: keyof typeof activeTab, id: string) {
    activeTab[tab] = id
  }
</script>

{#snippet content(isActive: boolean, content: unknown)}
  <Tab.Panel
    {isActive}
    transition={{
      in: [fly, { x: 300, duration: 400 }],
      out: [fade, { duration: 300 }]
    }}
  >
    {content}
  </Tab.Panel>
{/snippet}

{#snippet icon(s: string)}
  <span style="font-size: 20px;">{s}</span>
{/snippet}

<div style="max-width: 800px; margin: 3rem auto;">
  <Card>
    <Tab id="tab1">
      <Tab.List
        scrollable={false}
        lineStyle={{
          color: theme.colors.onError
        }}
      >
        {#each tabs.slice(0, 2) as tab (tab.id)}
          <Button
            id={tab.id}
            title={tab.label}
            variant="text"
            style="flex:1;"
            onclick={() => {
              handle("tab1", tab.id)
            }}
          >
            {#if tab.icon}
              {@render icon(tab.icon)}
            {/if}
            {tab.label}
          </Button>
        {/each}
      </Tab.List>

      {#each tabs as tab (tab.id)}
        {@render content(activeTab.tab1 === tab.id, tab.content)}
      {/each}
    </Tab>
  </Card>

  <Tab id="tab2" style="background: transparent;">
    <Tab.List
      hoverFollower={{
        bgColor: theme.colors.success
      }}
    >
      {#each tabs as tab (tab.id)}
        <Button
          id={tab.id}
          title={tab.label}
          variant="text"
          style="flex:1;"
          onclick={() => {
            handle("tab2", tab.id)
          }}
        >
          {#if tab.icon}
            {@render icon(tab.icon)}
          {/if}
          {tab.label}
        </Button>
      {/each}
    </Tab.List>

    {#each tabs as tab (tab.id)}
      {@render content(activeTab.tab2 === tab.id, tab.content)}
    {/each}
  </Tab>

  <Tab id="tab3" orientation="vertical">
    <Tab.List
      class="border-0"
      orientation="vertical"
      hoverFollower={{
        bgColor: theme.colors.muted
      }}
    >
      {#each tabs.slice(0, 5) as tab (tab.id)}
        <Button
          id={tab.id}
          title={tab.label}
          variant="text"
          onclick={() => {
            handle("tab5", tab.id)
          }}
        >
          {#if tab.icon}
            {@render icon(tab.icon)}
          {/if}
          {tab.label}
        </Button>
      {/each}
    </Tab.List>
    <Separator orientation="vertical" height="auto" />
    {#each tabs.slice(0, 5) as tab (tab.id)}
      {@render content(activeTab.tab5 === tab.id, tab.content)}
    {/each}
  </Tab>
</div>

Props

Prop	Type	Default	Description
id	string	—	Unique identifier for the tab instance.
orientation	"horizontal" | "vertical"	"horizontal"	Sets the tab list orientation.
style	CSSProperties	—	Inline styles for the tab container.
class	string	—	Optional CSS class for custom styling.

Tab.List Props

Prop	Type	Default	Description
scrollable	boolean	false	Allows horizontal scrolling of tab buttons.
lineStyle	CSSProperties	—	Custom styles for the indicator line.
hoverFollower	{ bgColor: string }	—	Adds a hover background effect behind tab buttons.
orientation	"horizontal" | "vertical"	"horizontal"	Controls list orientation independently of Tab.

Tab.Panel Props

Prop	Type	Default	Description
isActive	boolean	false	Whether this panel is currently visible.
transition	TransitionConfig[]	—	Transitions applied when showing/hiding the panel.

Notes

• Tabs can include icons, custom HTML, or snippets within the tab button.
• Each panel is isolated and can render complex content.
• Works seamlessly with responsive layouts; vertical tabs are useful for side navigation.