Ambar UI — Svelte 5 Components with Tailwind CSS v4

Import

ts

import Tabs from '$lib/components/Tabs.svelte';

Usage

svelte

<script lang="ts">
  import Tabs from '$lib/components/Tabs.svelte';

  const tabs = [
    { value: 'home',    label: 'Home'    },
    { value: 'explore', label: 'Explore' },
    { value: 'inbox',   label: 'Inbox'   },
  ];

  let active = $state('home');
</script>

<Tabs bind:value={active} {tabs} variant="pill" />

Line

Sliding underline indicator — classic navigation style.

Active: home

Pill

Floating pill background — suitable for feed or filter switching.

Card

Card style with a lifted active tab — works well inside panels.

With Icons

Pass an SVG HTML string via the icon field on each tab.

svelte

const tabs = [
  { value: 'video', label: 'Video', icon: '<svg ...>' },
  { value: 'music', label: 'Music', icon: '<svg ...>' },
];

<Tabs bind:value={active} {tabs} variant="card" />

Animations

Choose the indicator movement easing with the animation prop.

Vertical

Add vertical — the indicator slides on the right edge (line) or left side (pill/card).

home

Active page

Disabled

Set disabled: true on any tab — it shows a lock icon and blocks interaction.

Full Width

Add fullWidth — tabs share the container width equally.

API Reference

Tabs Props

Prop	Type	Default	Description
`tabs`	`Tab[]`	`—`	Array of tab definitions.
`value`	`string`	`''`	Bindable active tab value.
`variant`	`'line' \| 'pill' \| 'card'`	`'line'`	Visual style of the tab bar.
`animation`	`'smooth' \| 'spring' \| 'snappy' \| 'elastic' \| 'bounce'`	`'smooth'`	Easing curve used for the sliding indicator.
`fullWidth`	`boolean`	`false`	Stretches tabs to fill the container width.
`vertical`	`boolean`	`false`	Stacks tabs vertically with the indicator on the right edge.
`onchange`	`(value: string) => void`	`—`	Callback fired when the active tab changes.

Tab Object Fields

Prop	Type	Default	Description
`value`	`string`	`—`	Unique identifier for the tab.
`label`	`string`	`—`	Display text.
`icon`	`string`	`—`	SVG HTML string rendered before the label.
`disabled`	`boolean`	`false`	Grays out the tab and shows a lock icon.