Feature tabs

Supply feature tabs as data, with an optional media snippet per tab. The selected tab is local state; bind value or pass onValueChange to observe or control it. An unknown value selects the first feature. Requires the bits-ui package; no backend, no data fetching, and it does not load or lazy-load media for you.

Suggested location

src/lib/components/feature-tabs-01

Required props

featurestitle

Limitations

• Install bits-ui (npm install bits-ui@^2) before using the component.
• 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.
• Media is whatever the snippet renders. The component frames and clips it but does not size, lazy-load or pause it; give images width, height and alt text, and pause video on inactive tabs yourself.
• All panels share one grid cell, so the section is as tall as its tallest panel; a much longer panel leaves space under the shorter ones.

Example

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

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

{#snippet boardShot()}
	<img src="/screens/board.png" alt="A board with Backlog, Doing, Review and Done columns" width="1200" height="800" class="block h-auto w-full" />
{/snippet}

<FeatureTabs
	eyebrow="Halcyon 3"
	title="Plan, track and share work in one place"
	description="Boards, timelines and guest access all read from the same cards."
	features={[
		{
			value: 'boards',
			label: 'Boards',
			title: 'Every project on one board',
			description: 'Cards carry an owner, a due date and a status.',
			points: ['Your own columns', 'Board, list or calendar views'],
			media: boardShot
		},
		{
			value: 'timelines',
			label: 'Timelines',
			title: 'Every deadline on one calendar',
			description: 'Drag a bar to move a date.',
			points: ['Week, month or quarter zoom']
		}
	] satisfies FeatureTab[]}
	bind:value={selected}
/>

The source imports its own files by relative path only. Examples import from $lib/...; SvelteKit 3 projects have no $lib alias by default, so import from your #lib subpath (with the .svelte extension) or a relative path instead.

FeatureTabs.svelte
parts/FeaturePanel.svelte
types.ts

Change tabs and media through the features prop, and retone the section through seven --feature-tabs-* CSS variables. The accent marks the active tab, the focus ring and the point marks; everything else is text, hairlines, the media frame and the section background.

• Content: add, remove or reorder entries in features; keep each value unique and stable. Keep labels to one or two words so the row fits without scrolling on phones.
• Media: give a feature a media snippet (an img, a video or a product surface in markup). It fills a framed area in the wider column and is clipped to 8px corners. Features without media show their points beside the copy instead.
• Accent: set --feature-tabs-accent for the active underline, the focus ring and the point marks, and --feature-tabs-on-accent for the tick drawn on it. The default is near-black, so the section renders monochrome until you choose a colour.
• Text: --feature-tabs-ink is titles, active tabs and points; --feature-tabs-muted is the eyebrow, descriptions and resting tabs. Keep both at 4.5:1 against the surface.
• Worked retone for a dark page: --feature-tabs-surface: #09090b; --feature-tabs-ink: #fafafa; --feature-tabs-muted: #a1a1aa; --feature-tabs-hairline: rgb(255 255 255 / 0.1); --feature-tabs-frame: #18181b; --feature-tabs-accent: #fafafa; --feature-tabs-on-accent: #09090b. The frame keeps its shadow; on a dark page it reads as a hairline edge.
• Panel layout: edit parts/FeaturePanel.svelte to change the 5/7 split, or add a link under the description; extend FeatureTab in types.ts to match.
• Activation: Bits UI activates tabs on focus; add activationMode="manual" to Tabs.Root if media is expensive to render.
• Headings: set headingLevel to fit the page outline; panel titles use the next level.

Public CSS variables

Install with (shown for reference, run it yourself)

npm install bits-ui@^2.0.0

• 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) and activate them, Home and End jump to the first and last tab, and exactly one tab is in the Tab order, including when value is unknown. Arrow keys follow the reading direction under dir="rtl".
• The tab list is labelled by the section heading; the selected tab is marked by ink text and an underline, not colour alone.
• Panels are focusable so keyboard users reach panel content directly after the tab list; focus shows as a ring in the accent colour.
• Media is the consumer's responsibility: give images meaningful alt text, or mark a decorative surface aria-hidden when the panel copy already says what it shows.
• 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.
• Panel switches settle in over 220ms; under prefers-reduced-motion they only fade.

Known limitations

• On narrow screens the tab row scrolls horizontally; the edges with more tabs behind them fade, the selected tab is scrolled into view, and there are no scroll buttons.

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.1.3 (Published) Current release · 16 September 2026

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