Tabs

Tabs organize content into multiple panels and allow users to switch between them.

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

With String Content

The simplest way to use Tabs is with string content. Just pass an array of tabs with string values for the content property.

Home

Profile

Settings

Welcome to the home tab. This is simple string content.

With Snippet Content

For rich content with components and complex layouts, use Svelte Snippets as the content property.

Components

Actions

Lists

Snippet Content

This tab content is rendered using a Svelte Snippet.

Variants

Solid

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Outline

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Line

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Ghost

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Pills

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Colors

Primary

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Secondary

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Muted

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Success

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Info

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Danger

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Warning

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Positions

Top

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Bottom

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Start

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

End

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Line Variant with Positions

Top

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Bottom

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Start

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

End

Tab 1

Tab 2

Tab 3

This is simple string content for Tab 1.

Props

Prop	Type	Default

Tab Type

Prop	Type	Default