Content tabs

Pass tabs as data, each with a content snippet for its panel. The selected tab is local state; bind value or pass onValueChange to follow it. It is not page navigation (use links for route changes), and it does not fetch or lazy-load panel content: every panel is rendered, and only the selected one is visible.

Suggested location

src/lib/components/content-tabs-01

Required props

tabsariaLabel

Limitations

• Install bits-ui (npm install bits-ui@^2) before using the component.
• Every tab id must be unique; it is the key and the selected value.
• Switching tabs needs JavaScript; before hydration the selected panel shows and the others are hidden.
• All panels are rendered and share one grid cell, so the component is as tall as its tallest panel. Keep panels of similar length, or expect space under the short ones.
• A disabled tab cannot be focused, so say why it is disabled in its badge or nearby copy.
• There are no scroll buttons on an overflowing row; it scrolls by touch, trackpad or the arrow keys.

Example

<script lang="ts">
	import ContentTabs from '$lib/components/content-tabs-01/ContentTabs.svelte';

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

{#snippet overview()}
	<p>Filter the timeline by team, owner or label.</p>
{/snippet}

{#snippet activity()}
	<p>Moved from Backlog to Doing on 7 Oct.</p>
{/snippet}

{#snippet files()}
	<p>filter-spec.md, 12 KB</p>
{/snippet}

<ContentTabs
	ariaLabel="Card details"
	bind:value={selected}
	tabs={[
		{ id: 'overview', label: 'Overview', content: overview },
		{ id: 'activity', label: 'Activity', badge: '12', badgeLabel: '12 updates', content: activity },
		{ id: 'files', label: 'Files', badge: '4', badgeLabel: '4 files', content: files }
	]}
/>

ContentTabs.svelte
types.ts

Change tabs and panels through the tabs prop and retone through seven --content-tabs-* variables. The accent marks the selected tab (the bar, or the badge on the selected segment) and the focus ring; everything else is ink, muted text, hairlines and the pill track.

• Content: add, remove or reorder entries in tabs, keeping ids unique and stable. Keep labels to one or two words; long labels scroll the row on phones, and wrap in a vertical rail.
• Badges: badge is short visible text, a count or a word such as "New". Give badgeLabel ("12 updates") so a screen reader hears what the number means.
• Icons: pass a 16 px inline SVG with stroke="currentColor" as icon; it takes the tab's text colour.
• Accent: set --content-tabs-accent for the selected bar or mark, the selected badge and the focus ring, and --content-tabs-on-accent for the badge text on it. The default is near-black, so the component is monochrome until you choose a colour.
• Text: --content-tabs-ink is the selected label; --content-tabs-muted is resting labels and badges. Keep both at 4.5:1 on your page.
• Pills: --content-tabs-track is the recessed track and --content-tabs-raised the selected segment, which also carries a short accent mark so the selection reads without relying on the faint surface change. A vertical rail keeps the track, running the full height of the rail.
• Worked retone for a cream page: --content-tabs-ink: #292524; --content-tabs-muted: #57534e; --content-tabs-hairline: rgb(41 37 36 / 0.12); --content-tabs-track: #efe9df; --content-tabs-raised: #fffdf8; --content-tabs-accent: #9a3412; --content-tabs-on-accent: #ffffff.
• Layout: the vertical rail is 13rem wide with 40px to the panel; change @2xl:grid-cols-[13rem_minmax(0,1fr)] in the entry. The rail turns into a row below the @2xl container width (42rem).

Public CSS variables

Install with (shown for reference, run it yourself)

npm install bits-ui@^2.0.0

• Implements the WAI-ARIA APG tabs pattern through Bits UI: tablist, tab and tabpanel roles, aria-selected, aria-controls, aria-labelledby and aria-orientation.
• Left and Right move between tabs in a row, Up and Down in a vertical rail, following reading direction under dir="rtl"; Home and End jump to the ends and focus loops. When a vertical rail is shown as a row in a narrow container, the arrow keys follow the row.
• In manual mode the arrow keys move focus only; Enter, Space or a click selects. Exactly one tab is in the Tab order, the selected one.
• The tab list is named by ariaLabel. Supply one that says what the tabs choose between.
• A badge is part of its tab's name. With badgeLabel, the tab is named "label, badgeLabel" (for example "Activity, 12 updates"), so badgeLabel must carry the count itself.
• A panel keeps its own Tab stop unless its first meaningful content is a control, rechecked when the content changes, so keyboard users can reach and scroll panels that open with text; focus shows as a ring in the accent.
• Inactive panels stay in the layout but are inert and invisible, including any descendant that sets its own visibility, so they are neither focusable nor read.
• The selected tab is marked by ink text and a bar or a raised segment, not by colour alone. Disabled tabs are skipped by the keyboard and cannot be selected.
• Panel changes settle in over 200 ms after the first switch; under prefers-reduced-motion they only fade.

Known limitations

• A disabled tab is not focusable, so a screen-reader user in focus mode does not hear it; say why it is disabled in text outside the tab list if that matters.
• An overflowing row has no scroll buttons; tabs past the edge are reached by scrolling or the arrow keys, and the faded edge signals them.

Integration

• Local interaction
• Requires client-side JavaScript to be interactive
• Server-side rendering supported

License

MIT. Default license approval is pending; see the license status before adopting the source.

Version history

• 1.0.0 (Published) Current release · 30 September 2026

Only the current release is available. Keep downloaded source and its receipt if you need to use it again later.