Skeleton

Plane Panel - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo ipsa fugit suscipit autem vitae numquam et cumque praesentium vero eos minus itaque. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo.

<script lang="ts">
  import { Tabs } from '@skeletonlabs/skeleton-svelte';

  let group = $state('plane');
  const lorem =
    'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo ipsa fugit suscipit autem vitae numquam et cumque praesentium vero eos minus itaque. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo.';
</script>

<Tabs bind:value={group}>
  {#snippet list()}
    <Tabs.Control value="plane">Plane</Tabs.Control>
    <Tabs.Control value="boat">Boat</Tabs.Control>
    <Tabs.Control value="car">Car</Tabs.Control>
  {/snippet}
  {#snippet content()}
    <Tabs.Panel value="plane">Plane Panel - {lorem}</Tabs.Panel>
    <Tabs.Panel value="boat">Boat Panel - {lorem}</Tabs.Panel>
    <Tabs.Panel value="car">Car Panel - {lorem}</Tabs.Panel>
  {/snippet}
</Tabs>

Icons

Easily customize tabs content with icons and arrange them in any combination you prefer.

<script lang="ts">
  import { Tabs } from '@skeletonlabs/skeleton-svelte';
  // Icons
  import IconPlane from 'lucide-svelte/icons/plane';
  import IconBoat from 'lucide-svelte/icons/sailboat';
  import IconCar from 'lucide-svelte/icons/car';

  let group = $state('plane');
  const lorem =
    'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo ipsa fugit suscipit autem vitae numquam et cumque praesentium vero eos minus itaque. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo.';
</script>

<Tabs bind:value={group}>
  {#snippet list()}
    <Tabs.Control value="plane">
      <IconPlane size={20} />
    </Tabs.Control>
    <Tabs.Control value="boat">
      <IconBoat size={20} />
    </Tabs.Control>
    <Tabs.Control value="car">
      <IconCar size={20} />
    </Tabs.Control>
  {/snippet}
  {#snippet content()}
    <Tabs.Panel value="plane">Plane Panel - {lorem}</Tabs.Panel>
    <Tabs.Panel value="boat">Boat Panel - {lorem}</Tabs.Panel>
    <Tabs.Panel value="car">Car Panel - {lorem}</Tabs.Panel>
  {/snippet}
</Tabs>

<script lang="ts">
  import { Tabs } from '@skeletonlabs/skeleton-svelte';
  // Icons
  import IconPlane from 'lucide-svelte/icons/plane';
  import IconBoat from 'lucide-svelte/icons/sailboat';
  import IconCar from 'lucide-svelte/icons/car';

  let group = $state('plane');
  const lorem =
    'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo ipsa fugit suscipit autem vitae numquam et cumque praesentium vero eos minus itaque. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo.';
</script>

<Tabs bind:value={group}>
  {#snippet list()}
    <Tabs.Control value="plane">
      {#snippet lead()}<IconPlane size={20} />{/snippet}
      Plane
    </Tabs.Control>
    <Tabs.Control value="boat">
      {#snippet lead()}<IconBoat size={20} />{/snippet}
      Boat
    </Tabs.Control>
    <Tabs.Control value="car">
      {#snippet lead()}<IconCar size={20} />{/snippet}
      Car
    </Tabs.Control>
  {/snippet}
  {#snippet content()}
    <Tabs.Panel value="plane">Plane Panel - {lorem}</Tabs.Panel>
    <Tabs.Panel value="boat">Boat Panel - {lorem}</Tabs.Panel>
    <Tabs.Panel value="car">Car Panel - {lorem}</Tabs.Panel>
  {/snippet}
</Tabs>

Fluid

Set fluid to enable tabs to stretch to fill the avialable width.

<script lang="ts">
  import { Tabs } from '@skeletonlabs/skeleton-svelte';

  let group = $state('plane');
  const lorem =
    'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo ipsa fugit suscipit autem vitae numquam et cumque praesentium vero eos minus itaque. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo.';
</script>

<Tabs bind:value={group} fluid>
  {#snippet list()}
    <Tabs.Control value="plane">Plane</Tabs.Control>
    <Tabs.Control value="boat">Boat</Tabs.Control>
    <Tabs.Control value="car">Car</Tabs.Control>
  {/snippet}
  {#snippet content()}
    <Tabs.Panel value="plane">Plane Panel - {lorem}</Tabs.Panel>
    <Tabs.Panel value="boat">Boat Panel - {lorem}</Tabs.Panel>
    <Tabs.Panel value="car">Car Panel - {lorem}</Tabs.Panel>
  {/snippet}
</Tabs>

Justify

<script lang="ts">
  import { Tabs } from '@skeletonlabs/skeleton-svelte';

  let group = $state('plane');
  const lorem =
    'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo ipsa fugit suscipit autem vitae numquam et cumque praesentium vero eos minus itaque. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo.';
</script>

<Tabs bind:value={group} listJustify="justify-center">
  {#snippet list()}
    <Tabs.Control value="plane">Plane</Tabs.Control>
    <Tabs.Control value="boat">Boat</Tabs.Control>
    <Tabs.Control value="car">Car</Tabs.Control>
  {/snippet}
  {#snippet content()}
    <Tabs.Panel value="plane">Plane Panel - {lorem}</Tabs.Panel>
    <Tabs.Panel value="boat">Boat Panel - {lorem}</Tabs.Panel>
    <Tabs.Panel value="car">Car Panel - {lorem}</Tabs.Panel>
  {/snippet}
</Tabs>

RTL

<script lang="ts">
  import { Tabs } from '@skeletonlabs/skeleton-svelte';

  let group = $state('plane');
  const lorem =
    'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo ipsa fugit suscipit autem vitae numquam et cumque praesentium vero eos minus itaque. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo.';
</script>

<Tabs bind:value={group} dir="rtl">
  {#snippet list()}
    <Tabs.Control value="plane">Plane</Tabs.Control>
    <Tabs.Control value="boat">Boat</Tabs.Control>
    <Tabs.Control value="car">Car</Tabs.Control>
  {/snippet}
  {#snippet content()}
    <Tabs.Panel value="plane">Plane Panel - {lorem}</Tabs.Panel>
    <Tabs.Panel value="boat">Boat Panel - {lorem}</Tabs.Panel>
    <Tabs.Panel value="car">Car Panel - {lorem}</Tabs.Panel>
  {/snippet}
</Tabs>

API Reference

Tabs

Property	Type	Description
`value`	string	Set the active value.
`fluid`	boolean	Set tabs to stretch to fill the available width.
`base`	string	Set base classes for the root element.
`classes`	string	Provide arbitrary classes for the root element.
`listBase`	string	Set base classes for the list element.
`listJustify`	string	Set justify classes for the list element.
`listBorder`	string	Set border classes for the list element.
`listMargin`	string	Set margin classes for the list element.
`listGap`	string	Set gap classes for the list element.
`listClasses`	string	Provide arbitrary classes for the list element.
`contentBase`	string	Set base classes for the panel group element.
`contentClasses`	string	Provide arbitrary classes for the panel group element.
`list`	Snippet<[]>	Slot containing the list of tab controls.
`content`	Snippet<[]>	Slot containing the list of panels.
`ids`		The ids of the elements in the tabs. Useful for composition.
`translations`		Specifies the localized strings that identifies the accessibility elements and their states
`loopFocus`	boolean	Whether the keyboard navigation will loop from last tab to first, and vice versa. Default: true
`activationMode`	"manual" \| "automatic"	The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus Default: "automatic"
`onFocusChange`		Callback to be called when the focused tab changes
`composite`	boolean	Whether the tab is composite
`deselectable`	boolean	Whether the active tab can be deselected when clicking on it.
`dir`	"ltr" \| "rtl"	The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

TabsControl

Property	Type	Description
`base`	string	Set base classes for the control element.
`padding`	string	Set padding classes for the control element.
`translateX`	string	Set x-axis translate classes for the control element.
`classes`	string	Provide arbitrary classes for the control element.
`labelBase`	string	Set base classes for the label element.
`labelClasses`	string	Provide arbitrary classes for the label element.
`stateInactive`	string	Set inactive classes for the control element.
`stateActive`	string	Set active classes for the control element.
`stateLabelInactive`	string	Set inactive classes for the label element.
`stateLabelActive`	string	Set active classes for the label element.
`lead`	Snippet<[]>	The lead slot.
`children`	Snippet<[]>	The default child slot.
`value` *	string	The value of the tab
`disabled`	boolean	Whether the tab is disabled

TabsPanel

Property	Type	Description
`base`	string	Set base classes for the panel element.
`classes`	string	Provide arbitrary classes for the panel element.
`children`	Snippet<[]>	The default child slot.
`value` *	string	The value of the tab