Tabs

Content partitioner on bits-ui Tabs. Roving focus, keyboard-first navigation. Default variant springs a single pill between triggers; solid keeps the muted-rail look; line runs an underline indicator.

API Reference Component Source

Usage

Account

Update your handle, display name, and avatar. Changes apply instantly.

tabs.svelte

<script lang="ts">
	import { Tabs as TabsPrimitive } from 'bits-ui';
	import { cn } from '$lib/utils.js';

	let {
		ref = $bindable(null),
		value = $bindable(''),
		class: className,
		...restProps
	}: TabsPrimitive.RootProps = $props();
</script>

<TabsPrimitive.Root
	bind:ref
	bind:value
	data-slot="tabs"
	class={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
	{...restProps}
/>

Solid

Muted rail background with each active trigger painting its own surface. Use when tabs sit on a page with competing surfaces and need a firmer rail.

Summary metrics, recent events, and quick actions.

tabs-solid.svelte

<script lang="ts">
	import { Tabs as TabsPrimitive } from 'bits-ui';
	import { cn } from '$lib/utils.js';

	let {
		ref = $bindable(null),
		value = $bindable(''),
		class: className,
		...restProps
	}: TabsPrimitive.RootProps = $props();
</script>

<TabsPrimitive.Root
	bind:ref
	bind:value
	data-slot="tabs"
	class={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
	{...restProps}
/>

Line

Underline indicator — the active trigger drops a 2px rail. No container, no pill; works well inside panels where a contained look would double up on the surface.

Summary metrics, recent events, and quick actions.

tabs-line.svelte

<script lang="ts">
	import { Tabs as TabsPrimitive } from 'bits-ui';
	import { cn } from '$lib/utils.js';

	let {
		ref = $bindable(null),
		value = $bindable(''),
		class: className,
		...restProps
	}: TabsPrimitive.RootProps = $props();
</script>

<TabsPrimitive.Root
	bind:ref
	bind:value
	data-slot="tabs"
	class={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
	{...restProps}
/>

Tabs.Root props

Inherits from bits-ui Tabs.Root. Tabs.List adds one bloom-specific prop; other subcomponents passthrough.

Type	Default	Description
`string (bindable)`	—	Currently selected tab value. Two-way bindable.
`'horizontal' \| 'vertical'`	`'horizontal'`	Layout axis. Vertical stacks triggers and pipes roving focus up/down.
`'automatic' \| 'manual'`	`'automatic'`	Whether focus alone activates a tab, or activation requires Enter/Space.
`boolean`	`true`	Roving focus wraps at the ends when true.

Tabs.List props

Prop	Type	Default	Description
	`'default' \| 'solid' \| 'line'`	`'default'`	Presentation. `default` springs a single pill between triggers. `solid` keeps the muted-rail with per-trigger paint. `line` renders an underline rail.
	`string`	—	Merged onto the list container via tailwind-merge.