Feature tabs

Usage

Supply feature tabs as data. The selected tab is local state; bind value or pass onValueChange to observe or control it. Requires the bits-ui package; no backend.

Suggested location: src/lib/components/feature-tabs-01

Required props: features, title

Example

<script lang="ts">
	import FeatureTabs from '$lib/components/feature-tabs-01/FeatureTabs.svelte';
	import type { FeatureTab } from '$lib/components/feature-tabs-01/types';

	const features: FeatureTab[] = [
		{ value: 'plan', label: 'Plan', title: 'Plan work in one place', description: 'Collect tasks, owners and dates on a shared board.', points: ['Shared boards', 'Due dates'] },
		{ value: 'track', label: 'Track', title: 'See progress at a glance', description: 'Status updates roll up into a weekly summary.' }
	];

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

<FeatureTabs title="How it works" {features} bind:value={selected} />

Limitations

• Install bits-ui (npm install bits-ui@^2) before using the component.
• Panel content is plain text; edit FeaturePanel.svelte to add media or rich content.
• Every feature value must be unique; it is used as the tab key.
• Tab switching needs JavaScript; before hydration only the initially selected panel is visible.

feature-tabs-01/
  FeatureTabs.svelte
  parts/FeaturePanel.svelte
  types.ts

<script lang="ts">
	import FeatureTabs from '$lib/components/feature-tabs-01/FeatureTabs.svelte';
	import type { FeatureTab } from '$lib/components/feature-tabs-01/types';

	const features: FeatureTab[] = [
		{
			value: 'plan',
			label: 'Plan',
			title: 'Plan work in one place',
			description: 'Collect tasks, owners and dates on a shared board.',
			points: ['Shared boards', 'Due dates']
		},
		{
			value: 'track',
			label: 'Track',
			title: 'See progress at a glance',
			description: 'Status updates roll up into a weekly summary.'
		}
	];

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

<FeatureTabs title="How it works" {features} bind:value={selected} />

Customization

Change tabs through the features prop, edit the panel layout in parts/FeaturePanel.svelte, and edit Tailwind classes for colours and spacing. No colour tokens are declared.

• Content: add, remove or reorder entries in features; keep each value unique and stable.
• Panel layout: edit parts/FeaturePanel.svelte to add an image, link or different grid; extend FeatureTab in types.ts to match.
• Active tab style: change the data-[state=active]: border and text utilities on Tabs.Trigger.
• Colours: replace the zinc text, border and outline utilities together and keep text at 4.5:1 contrast.
• Activation: Bits UI activates tabs on focus by default; add activationMode="manual" to Tabs.Root if panels are expensive to render.
• Headings: set headingLevel to fit the page outline; panel titles use the next level.

Props and content inputs

Dependencies and services

Install with (shown for reference, run it yourself):

npm install bits-ui@^2.0.0

Integration boundaries

• Integration level: local-interaction.
• Requires client-side JavaScript to be interactive.
• Server-side rendering: supported.

Accessibility

• Implements the WAI-ARIA tabs pattern through Bits UI: tablist, tab and tabpanel roles with aria-selected, aria-controls and aria-labelledby.
• Arrow keys move between tabs (looping), Home and End jump to the first and last tab, and only the selected tab is in Tab order.
• The tab list is labelled by the section heading; the selected tab is indicated by text colour and an underline, not colour alone.
• Panels are focusable so keyboard users can reach panel content directly after the tab list; focus is shown with a visible outline.
• Tab and panel IDs, aria-controls, aria-labelledby and the roving tabindex are set explicitly from $props.id() and the selected value, so server-rendered markup is complete before hydration and multiple instances never collide.

Known limitations

• On narrow screens tabs scroll horizontally; there is no visible scroll affordance beyond the clipped last tab.

License

Source license: MIT.

Version history

Only one release has been published so far; earlier versions will be listed here.

• 1.0.0 Published current · selected · 16 September 2026