Tabs

A tabbed interface for organizing content into separate views.

Anatomy 

<script>
  import { Tabs } from "@saas-ui/svelte/components/tabs";
</script>

<Tabs.Root defaultValue="tab1">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Content for Tab 1</Tabs.Content>
  <Tabs.Content value="tab2">Content for Tab 2</Tabs.Content>
  <Tabs.Content value="tab3">Content for Tab 3</Tabs.Content>
</Tabs.Root>

Examples

Basic Accessibility

Basic tabs with icons and default styling.

Colours Accessibility

Use the colour prop to change the colour theme.

Disabled Tab Accessibility

Use the disabled prop on individual triggers.

Dynamic Accessibility

Dynamically add and remove tabs.

Fitted Accessibility

Use the fitted prop to make tabs fill the container width.

Lazy Mounted Accessibility

Use lazyMount and unmountOnExit for performance optimization.

Manual Activation Accessibility

Use activationMode="manual" to require Enter/click to activate.

Prefetch Accessibility

Use onPrefetch to lazy-load components when hovering over tabs. This is useful for deferring heavy dependencies (like charts) until the user shows intent to view that tab.

Sizes Accessibility

Use the size prop to change the size of the tabs.

Variants Accessibility

Use the variant prop to change the visual style.

With Indicator Accessibility

Use Tabs.Indicator for a custom animated indicator.

Props

Tabs.Root

The root container component for the tabs.

Prop Type Default Description
children Snippet - Content to render inside the tabs.
class string - Additional classes to apply.
defaultValue string - The default value of the selected tab.
value string - The controlled value of the selected tab.
activationMode "automatic" | "manual" "automatic" The activation mode of the tabs.
lazyMount boolean false Whether to enable lazy mounting.
unmountOnExit boolean false Whether to unmount tab content when not active.
orientation "horizontal" | "vertical" "horizontal" The orientation of the tabs.
loopFocus boolean true Whether the keyboard navigation will loop.
size "xs" | "sm" | "md" | "lg" "md" The size of the tabs.
variant "line" | "subtle" | "enclosed" | "outline" | "plain" "line" The visual style of the tabs.
fitted boolean false Whether tabs should stretch to fill the container.
justify "start" | "center" | "end" - The alignment of the tabs.
colour ColourName "gray" The colour palette of the tabs.
onValueChange (details: { value: string }) => void - Callback when the selected tab changes.
onPrefetch (value: string) => void - Callback invoked when hovering over a tab trigger. Similar to Astro's link prefetching, this allows preloading data before selection.

Tabs.List

The container for the tab triggers.

Prop Type Default Description
children Snippet - The content of the tabs list.
class string - Additional classes to apply.

Tabs.Trigger

The clickable tab trigger that activates the corresponding content.

Prop Type Default Description
children Snippet - The content of the trigger.
value string - The unique value of the tab.
disabled boolean false Whether the tab is disabled.
class string - Additional classes to apply.

Tabs.Content

The panel content associated with a tab trigger.

Prop Type Default Description
children Snippet - The content of the tab panel.
value string - The unique value of the tab this content belongs to.
class string - Additional classes to apply.

Tabs.ContentGroup

A container for grouping tab content panels.

Prop Type Default Description
children Snippet - The content (tab panels) to render.
class string - Additional classes to apply.

Tabs.Indicator

An animated indicator that highlights the active tab.

Prop Type Default Description
class string - Additional classes to apply.