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

<!-- Illustrative content: replace example claims, prices and links before publishing. -->
<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.

FeatureTabs.svelte
parts/FeaturePanel.svelte
types.ts

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

Declared source license: MIT.

Default license approval is pending. See the license status before adopting the source.

Version history

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

• 1.0.0 Published current · selected · 16 September 2026