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.

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 state 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.

Current path: /docs/react/framework-components/tabs

tsx

import { Tabs } from '@skeletonlabs/skeleton-react';
import { navigate } from 'astro:transitions/client';

// Use your framework to get a reference to the current URL
export default function Navigation(props: { url: URL }) {
	return (
		<div className="flex flex-col gap-4">
			<span>
				Current path: <code className="code">{props.url.pathname + props.url.hash}</code>
			</span>
			<Tabs
				value={props.url.pathname + props.url.hash}
				// Replace `navigate` with your framework's navigation function
				navigate={(details) => navigate(details.value)}
			>
				<Tabs.List>
					<Tabs.Trigger value="/overview">Overview</Tabs.Trigger>
					<Tabs.Trigger value="/features">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>
		</div>
	);
}

Current path: /docs/react/framework-components/tabs/docs/react/framework-components/tabs

svelte

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

	// Replace getting the URL with your framework's method of accessing the current URL
	const props: { url: URL } = $props();
</script>

<div class="flex flex-col gap-4">
	<span>Current path: <code class="code">{props.url.pathname + props.url.pathname}</code></span>
	<!-- Replace `navigate` with your framework's navigation function -->
	<Tabs value={props.url.pathname + props.url.pathname} navigate={(details) => navigate(details.value)}>
		<Tabs.List>
			<Tabs.Trigger value="#overview">Overview</Tabs.Trigger>
			<Tabs.Trigger value="#features">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>
</div>

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>

Orientation

Using the orientation prop to control the layout.

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" className="justify-start">
					Overview
				</Tabs.Trigger>
				<Tabs.Trigger value="features" className="justify-start">
					Key features
				</Tabs.Trigger>
				<Tabs.Trigger value="activity" className="justify-start">
					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" class="justify-start">Overview</Tabs.Trigger>
		<Tabs.Trigger value="features" class="justify-start">Key features</Tabs.Trigger>
		<Tabs.Trigger value="activity" class="justify-start">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

Set the text direction (ltr or rtl) using the dir prop.

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>

Anatomy

Here’s an overview of how the Tabs component is structured in code:

tsx

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

export default function Anatomy() {
	return (
		<Tabs>
			<Tabs.List>
				<Tabs.Trigger />
				<Tabs.Indicator />
			</Tabs.List>
			<Tabs.Content />
		</Tabs>
	);
}

svelte

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

<Tabs>
	<Tabs.List>
		<Tabs.Trigger />
		<Tabs.Indicator />
	</Tabs.List>
	<Tabs.Content />
</Tabs>

API Reference

Unable to load component information for react/tabs

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Controlled

Navigation

Fluid Width

Orientation

Direction

Anatomy

API Reference