Tabs

Organize content into separate views that users can switch between.

Installation

Import

import { Tabs, Tab } from '@svelte-atoms/core';

Preset Configuration

Customize the tabs appearance using presets

You can customize the default styles for Tabs components by defining presets in your configuration:

Examples

Explore different tab variations

Basic Tabs

Simple tab navigation

Code

<script lang="ts">
  let activeTab = $state('tab1');
</script>

<Tabs.Root bind:value={activeTab}>
  <Tabs.Header>
    <Tab.Root value="tab1">
      <Tab.Header>Tab 1</Tab.Header>
      <Tab.Body>Content 1</Tab.Body>
    </Tab.Root>
    <Tab.Root value="tab2">
      <Tab.Header>Tab 2</Tab.Header>
      <Tab.Body>Content 2</Tab.Body>
    </Tab.Root>
  </Tabs.Header>
  <Tabs.Body>
    <Tabs.Content />
  </Tabs.Body>
</Tabs.Root>

Content Example

Tabs with rich content

Code

<script lang="ts">
  let exampleTab = $state('overview');
</script>

<Tabs.Root bind:value={exampleTab}>
  <Tabs.Header>
    <Tab.Root value="overview">
      <Tab.Header>Overview</Tab.Header>
      <Tab.Body>Content</Tab.Body>
    </Tab.Root>
    <Tab.Root value="features">
      <Tab.Header>Features</Tab.Header>
      <Tab.Body>More content</Tab.Body>
    </Tab.Root>
  </Tabs.Header>
  <Tabs.Body>
    <Tabs.Content />
  </Tabs.Body>
</Tabs.Root>

API Reference

Tabs.Root

Container for the entire tabs component.

Prop

Type

Default

Description

value

D | undefined

undefined

Active tab value

factory

Factory<TabsBond<unknown>> | undefined

undefined

Factory

children

Snippet<[{ tabs: TabsBond<unknown>; }]> | undefined

undefined

Children

onchange

((value: D) => void) | undefined

undefined

Onchange

...atomProps

HtmlAtomProps

All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.

Tabs.Header

Container for tab headers. All Tab.Header components are rendered here.

Prop

Type

Default

Description

children

Snippet<[{ tabs?: TabsBond<unknown>; }]> | undefined

undefined

Children

...atomProps

HtmlAtomProps

All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.

Tabs.Body

Container for Tab.Root components. Only the active tab's body is displayed.

Prop

Type

Default

Description

children

Snippet<[{ tabs?: TabsBond<unknown>; }]> | undefined

undefined

Children

...atomProps

HtmlAtomProps

All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.

Tab.Root

Individual tab component containing header and body.

Prop

Type

Default

Description

value

string

nanoid()

Unique tab identifier

disabled

boolean

false

Disable tab

class

string

Additional CSS classes

Tab.Header

Clickable header for the tab, rendered in Tabs.Header.

Prop

Type

Default

Description

children

Snippet<[{ tab?: TabBond<unknown>; }]> | undefined

undefined

Children

onpointerdown

((ev: PointerEvent, context: { tab?: TabBond<unknown>; }) => void) | undefined

undefined

Onpointerdown

...atomProps

HtmlAtomProps

All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.

Tab.Body

Content area for the tab, displayed when active.

Prop

Type

Default

Description

children

Snippet<[{ tab?: TabBond<unknown>; }]> | undefined

undefined

Children

...atomProps

HtmlAtomProps

All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.

Accessibility

Built-in Accessibility Features

• ARIA tabs pattern (role="tablist", "tab", "tabpanel")
• Keyboard navigation (Arrow keys, Home, End)
• aria-selected state
• Automatic tab panel association
• Focus management
• Screen reader friendly

Stack

Textarea