Tabs · Skeleton

A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to deeper docs.

tsx

import { Tabs } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<Tabs defaultValue="overview">
			<Tabs.List>
				<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
				<Tabs.Trigger value="features">Key features</Tabs.Trigger>
				<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="overview">
				A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
				to deeper docs.
			</Tabs.Content>
			<Tabs.Content value="features">
				List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
				theming, integrations).
			</Tabs.Content>
			<Tabs.Content value="activity">
				Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
				actionable.
			</Tabs.Content>
		</Tabs>
	);
}

A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to deeper docs.

svelte

<script lang="ts">
	import { Tabs } from '@skeletonlabs/skeleton-svelte';
</script>

<Tabs defaultValue="overview">
	<Tabs.List>
		<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
		<Tabs.Trigger value="features">Key features</Tabs.Trigger>
		<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="overview">
		A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to
		deeper docs.
	</Tabs.Content>
	<Tabs.Content value="features">
		List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility, theming,
		integrations).
	</Tabs.Content>
	<Tabs.Content value="activity">
		Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
		actionable.
	</Tabs.Content>
</Tabs>

Controlled

Use the value and onValueChange props to control the active tab programmatically.

A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to deeper docs.

tsx

import { Tabs } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

export default function Controlled() {
	const [value, setValue] = useState('overview');

	return (
		<Tabs value={value} onValueChange={(details) => setValue(details.value)}>
			<Tabs.List>
				<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
				<Tabs.Trigger value="features">Key features</Tabs.Trigger>
				<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="overview">
				A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
				to deeper docs.
			</Tabs.Content>
			<Tabs.Content value="features">
				List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
				theming, integrations).
			</Tabs.Content>
			<Tabs.Content value="activity">
				Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
				actionable.
			</Tabs.Content>
		</Tabs>
	);
}

A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to deeper docs.

svelte

<script lang="ts">
	import { Tabs } from '@skeletonlabs/skeleton-svelte';

	let value = $state('overview');
</script>

<Tabs {value} onValueChange={(details) => (value = details.value)}>
	<Tabs.List>
		<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
		<Tabs.Trigger value="features">Key features</Tabs.Trigger>
		<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="overview">
		A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to
		deeper docs.
	</Tabs.Content>
	<Tabs.Content value="features">
		List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility, theming,
		integrations).
	</Tabs.Content>
	<Tabs.Content value="activity">
		Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
		actionable.
	</Tabs.Content>
</Tabs>

Use the element slot to override the default button with an a tag for navigation tabs.

Overview Key features Activity

A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to deeper docs.

tsx

import { Tabs } from '@skeletonlabs/skeleton-react';

export default function Navigation() {
	return (
		<Tabs defaultValue="overview">
			<Tabs.List>
				<Tabs.Trigger
					value="overview"
					element={(attributes: Record<string, unknown>) => (
						<a href="#overview" {...attributes}>
							Overview
						</a>
					)}
				/>
				<Tabs.Trigger
					value="features"
					element={(attributes: Record<string, unknown>) => (
						<a href="#features" {...attributes}>
							Key features
						</a>
					)}
				/>
				<Tabs.Trigger
					value="activity"
					element={(attributes: Record<string, unknown>) => (
						<a href="#activity" {...attributes}>
							Activity
						</a>
					)}
				/>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="overview">
				A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
				to deeper docs.
			</Tabs.Content>
			<Tabs.Content value="features">
				List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
				theming, integrations).
			</Tabs.Content>
			<Tabs.Content value="activity">
				Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
				actionable.
			</Tabs.Content>
		</Tabs>
	);
}

Overview Key features Activity

A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to deeper docs.

svelte

<script lang="ts">
	import { Tabs } from '@skeletonlabs/skeleton-svelte';
</script>

<Tabs defaultValue="overview">
	<Tabs.List>
		<Tabs.Trigger value="overview">
			{#snippet element(attributes: Record<string, unknown>)}
				<a href="#overview" {...attributes}>Overview</a>
			{/snippet}
		</Tabs.Trigger>
		<Tabs.Trigger value="features">
			{#snippet element(attributes: Record<string, unknown>)}
				<a href="#features" {...attributes}>Key features</a>
			{/snippet}
		</Tabs.Trigger>
		<Tabs.Trigger value="activity">
			{#snippet element(attributes: Record<string, unknown>)}
				<a href="#activity" {...attributes}>Activity</a>
			{/snippet}
		</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="overview">
		A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to
		deeper docs.
	</Tabs.Content>
	<Tabs.Content value="features">
		List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility, theming,
		integrations).
	</Tabs.Content>
	<Tabs.Content value="activity">
		Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
		actionable.
	</Tabs.Content>
</Tabs>

Fluid Width

Use flex utility classes to make the tabs stretch to fill the width of their container.

A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to deeper docs.

tsx

import { Tabs } from '@skeletonlabs/skeleton-react';

export default function Fluid() {
	return (
		<Tabs defaultValue="overview">
			<Tabs.List>
				<Tabs.Trigger className="flex-1" value="overview">
					Overview
				</Tabs.Trigger>
				<Tabs.Trigger className="flex-1" value="features">
					Key features
				</Tabs.Trigger>
				<Tabs.Trigger className="flex-1" value="activity">
					Activity
				</Tabs.Trigger>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="overview">
				A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
				to deeper docs.
			</Tabs.Content>
			<Tabs.Content value="features">
				List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
				theming, integrations).
			</Tabs.Content>
			<Tabs.Content value="activity">
				Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
				actionable.
			</Tabs.Content>
		</Tabs>
	);
}

A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to deeper docs.

svelte

<script lang="ts">
	import { Tabs } from '@skeletonlabs/skeleton-svelte';
</script>

<Tabs defaultValue="overview">
	<Tabs.List>
		<Tabs.Trigger class="flex-1" value="overview">Overview</Tabs.Trigger>
		<Tabs.Trigger class="flex-1" value="features">Key features</Tabs.Trigger>
		<Tabs.Trigger class="flex-1" value="activity">Activity</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="overview">
		A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to
		deeper docs.
	</Tabs.Content>
	<Tabs.Content value="features">
		List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility, theming,
		integrations).
	</Tabs.Content>
	<Tabs.Content value="activity">
		Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
		actionable.
	</Tabs.Content>
</Tabs>

Vertical

Use the vertical prop to render tabs stacked vertically.

A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to deeper docs.

tsx

import { Tabs } from '@skeletonlabs/skeleton-react';

export default function Vertical() {
	return (
		<Tabs defaultValue="overview" orientation="vertical">
			<Tabs.List>
				<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
				<Tabs.Trigger value="features">Key features</Tabs.Trigger>
				<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="overview">
				A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
				to deeper docs.
			</Tabs.Content>
			<Tabs.Content value="features">
				List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
				theming, integrations).
			</Tabs.Content>
			<Tabs.Content value="activity">
				Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
				actionable.
			</Tabs.Content>
		</Tabs>
	);
}

A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to deeper docs.

svelte

<script lang="ts">
	import { Tabs } from '@skeletonlabs/skeleton-svelte';
</script>

<Tabs defaultValue="overview" orientation="vertical">
	<Tabs.List>
		<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
		<Tabs.Trigger value="features">Key features</Tabs.Trigger>
		<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="overview">
		A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to
		deeper docs.
	</Tabs.Content>
	<Tabs.Content value="features">
		List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility, theming,
		integrations).
	</Tabs.Content>
	<Tabs.Content value="activity">
		Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
		actionable.
	</Tabs.Content>
</Tabs>

Direction

Use the dir prop to switch direction for RTL/LTR layouts.

A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to deeper docs.

tsx

import { Tabs } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		<Tabs defaultValue="overview" dir="rtl">
			<Tabs.List>
				<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
				<Tabs.Trigger value="features">Key features</Tabs.Trigger>
				<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content value="overview">
				A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
				to deeper docs.
			</Tabs.Content>
			<Tabs.Content value="features">
				List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
				theming, integrations).
			</Tabs.Content>
			<Tabs.Content value="activity">
				Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
				actionable.
			</Tabs.Content>
		</Tabs>
	);
}

A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to deeper docs.

svelte

<script lang="ts">
	import { Tabs } from '@skeletonlabs/skeleton-svelte';
</script>

<Tabs defaultValue="overview" dir="rtl">
	<Tabs.List>
		<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
		<Tabs.Trigger value="features">Key features</Tabs.Trigger>
		<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content value="overview">
		A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links to
		deeper docs.
	</Tabs.Content>
	<Tabs.Content value="features">
		List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility, theming,
		integrations).
	</Tabs.Content>
	<Tabs.Content value="activity">
		Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
		actionable.
	</Tabs.Content>
</Tabs>

API Reference

Root

txt

w-full flex data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row

Prop	Default	Type
`ids`	—	Partial<{ root: string; trigger: (value: string) => string; list: string; content: (value: string) => string; indicator: string; }> \| undefined The ids of the elements in the tabs. Useful for composition.
`translations`	—	IntlTranslations \| undefined Specifies the localized strings that identifies the accessibility elements and their states
`loopFocus`	true	boolean \| undefined Whether the keyboard navigation will loop from last tab to first, and vice versa.
`value`	—	string \| null \| undefined The controlled selected tab value
`defaultValue`	—	string \| null \| undefined The initial selected tab value when rendered. Use when you don't need to control the selected tab value.
`orientation`	"horizontal"	"horizontal" \| "vertical" \| undefined The orientation of the tabs. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work.
`activationMode`	"automatic"	"manual" \| "automatic" \| undefined The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus
`onValueChange`	—	((details: ValueChangeDetails) => void) \| undefined Callback to be called when the selected/active tab changes
`onFocusChange`	—	((details: FocusChangeDetails) => void) \| undefined Callback to be called when the focused tab changes
`composite`	—	boolean \| undefined Whether the tab is composite
`deselectable`	—	boolean \| undefined Whether the active tab can be deselected when clicking on it.
`navigate`	—	((details: NavigateDetails) => void) \| null \| undefined Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	TabsApi<PropTypes>
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	(tabs: TabsApi<PropTypes>) => ReactNode

List

txt

relative flex gap-2 border-surface-200-800 data-[orientation=horizontal]:pb-2 data-[orientation=horizontal]:mb-4 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:border-b data-[orientation=vertical]:pe-2 data-[orientation=vertical]:me-4 data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-e

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Trigger

txt

btn hover:preset-tonal-primary data-disabled:opacity-50

Prop	Default	Type
`value`	—	string The value of the tab
`disabled`	—	boolean \| undefined Whether the tab is disabled
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

Indicator

txt

bg-surface-950-50 data-[orientation=horizontal]:w-(--width) data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:bottom-0 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:h-(--height) data-[orientation=vertical]:end-0

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Content

Prop	Default	Type
`value`	—	string The value of the tab
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Root

txt

w-full flex data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row

Prop	Default	Type
`ids`	—	Partial<{ root: string; trigger: (value: string) => string; list: string; content: (value: string) => string; indicator: string; }> \| undefined The ids of the elements in the tabs. Useful for composition.
`translations`	—	IntlTranslations \| undefined Specifies the localized strings that identifies the accessibility elements and their states
`loopFocus`	true	boolean \| undefined Whether the keyboard navigation will loop from last tab to first, and vice versa.
`value`	—	string \| null \| undefined The controlled selected tab value
`defaultValue`	—	string \| null \| undefined The initial selected tab value when rendered. Use when you don't need to control the selected tab value.
`orientation`	"horizontal"	"horizontal" \| "vertical" \| undefined The orientation of the tabs. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work.
`activationMode`	"automatic"	"manual" \| "automatic" \| undefined The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus
`onValueChange`	—	((details: ValueChangeDetails) => void) \| undefined Callback to be called when the selected/active tab changes
`onFocusChange`	—	((details: FocusChangeDetails) => void) \| undefined Callback to be called when the focused tab changes
`composite`	—	boolean \| undefined Whether the tab is composite
`deselectable`	—	boolean \| undefined Whether the active tab can be deselected when clicking on it.
`navigate`	—	((details: NavigateDetails) => void) \| null \| undefined Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	() => TabsApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => TabsApi<PropTypes>]>

List

txt

relative flex gap-2 border-surface-200-800 data-[orientation=horizontal]:pb-2 data-[orientation=horizontal]:mb-4 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:border-b data-[orientation=vertical]:pe-2 data-[orientation=vertical]:me-4 data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-e

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Trigger

txt

btn hover:preset-tonal-primary data-disabled:opacity-50

Prop	Default	Type
`value`	—	string The value of the tab
`disabled`	—	boolean \| undefined Whether the tab is disabled
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

Indicator

txt

bg-surface-950-50 data-[orientation=horizontal]:w-(--width) data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:bottom-0 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:h-(--height) data-[orientation=vertical]:end-0

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Content

Prop	Default	Type
`value`	—	string The value of the tab
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself