A typed tab list with caller-provided Svelte snippets.
SelectedUnselected
Overview content with caller-owned markup.
<Tabs items={items} bind:value />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Tabs } from '@chanrg/4ui';<Tabs items={items} bind:value />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | TabItem[] | required | Labels and panel snippets. |
value | string | first item | Bindable selected tab. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Uses tablist, tab, and tabpanel semantics.