Components
Tabs
A group of buttons with a bindable selected value.
Props
Native attributes and event handlers are forwarded to the underlying div element unless
handled by the component.
Each Tab contains a string title and a value of any type. Custom children replace
the generated buttons; render the selected content separately.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Custom content replacing the generated tab buttons. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLDivElement | null | null | Bindable reference to the underlying DOM element. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isVisible | boolean | true | Bindable visibility state. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
tabs | Tab[] | [] | Tab titles and values used to generate buttons. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
value | any | undefined | Bindable current value of the control. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import Tabs from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for Tabs in the built-in themes is shown below.
pill — Apply the pill variant.
Loading...full — Apply the full variant.
Loading...compact — Apply the compact variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Change aria-label while retaining the default component styling.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...Bind the selection
Render the associated content separately using the selected value.
Overview content
Loading...