Tabs

Organize content into separate views that users can switch between.

Installation

Import

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

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 />
  <Tabs.Body>
    <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.Body>
</Tabs.Root>

Content Example

Tabs with rich content

Code

<Tabs.Root bind:value={exampleTab}>
  <Tabs.Header />
  <Tabs.Body>
    <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.Body>
</Tabs.Root>

API Reference

Tabs.Root

Container for the entire tabs component.

Prop

Type

Default

Description

value

string

Active tab value (bindable)

class

string

Additional CSS classes

Tabs.Header

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

Prop

Type

Default

Description

class

string

Additional CSS classes

Tabs.Body

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

Prop

Type

Default

Description

class

string

Additional CSS classes

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

class

string

Additional CSS classes

Tab.Body

Content area for the tab, displayed when active.

Prop

Type

Default

Description

class

string

Additional CSS classes

Accessibility

Built-in Accessibility Features

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

Stack

Textarea