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.

import React, { useState } from 'react';
import { Tabs } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  const [group, setGroup] = useState('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.';

  return (
    <Tabs value={group} onValueChange={setGroup}>
      <Tabs.List>
        <Tabs.Control value="plane">Plane</Tabs.Control>
        <Tabs.Control value="boat">Boat</Tabs.Control>
        <Tabs.Control value="car">Car</Tabs.Control>
      </Tabs.List>
      <Tabs.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>
      </Tabs.Content>
    </Tabs>
  );
};

Icons

import React, { useState } from 'react';
import { Tabs } from '@skeletonlabs/skeleton-react';
import { Plane as IconPlane, Sailboat as IconBoat, Car as IconCar } from 'lucide-react';

export const Page: React.FC = () => {
  const [group, setGroup] = useState('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.';

  return (
    <Tabs value={group} onValueChange={setGroup}>
      <Tabs.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>
      </Tabs.List>
      <Tabs.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>
      </Tabs.Content>
    </Tabs>
  );
};

import React, { useState } from 'react';
import { Tabs } from '@skeletonlabs/skeleton-react';
import { Plane as IconPlane, Sailboat as IconBoat, Car as IconCar } from 'lucide-react';

export const Page: React.FC = () => {
  const [group, setGroup] = useState('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.';

  return (
    <Tabs value={group} onValueChange={setGroup}>
      <Tabs.List>
        <Tabs.Control value="plane" lead={<IconPlane size={20} />}>
          Plane
        </Tabs.Control>
        <Tabs.Control value="boat" lead={<IconBoat size={20} />}>
          Boat
        </Tabs.Control>
        <Tabs.Control value="car" lead={<IconCar size={20} />}>
          Car
        </Tabs.Control>
      </Tabs.List>
      <Tabs.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>
      </Tabs.Content>
    </Tabs>
  );
};

Fluid

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

import React, { useState } from 'react';
import { Tabs } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  const [group, setGroup] = useState('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.';
  return (
    <Tabs value={group} onValueChange={setGroup} fluid>
      <Tabs.List>
        <Tabs.Control value="plane">Plane</Tabs.Control>
        <Tabs.Control value="boat">Boat</Tabs.Control>
        <Tabs.Control value="car">Car</Tabs.Control>
      </Tabs.List>
      <Tabs.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>
      </Tabs.Content>
    </Tabs>
  );
};

Justify

import React, { useState } from 'react';
import { Tabs } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  const [group, setGroup] = useState('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.';

  return (
    <Tabs value={group} onValueChange={setGroup}>
      <Tabs.List justify="justify-center">
        <Tabs.Control value="plane">Plane</Tabs.Control>
        <Tabs.Control value="boat">Boat</Tabs.Control>
        <Tabs.Control value="car">Car</Tabs.Control>
      </Tabs.List>
      <Tabs.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>
      </Tabs.Content>
    </Tabs>
  );
};

RTL

This component fully supports RTL layouts for seamless navigation and accessibility.

import React, { useState } from 'react';
import { Tabs } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  const [group, setGroup] = useState('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.';

  return (
    <Tabs value={group} onValueChange={setGroup} dir="rtl">
      <Tabs.List>
        <Tabs.Control value="plane">Plane</Tabs.Control>
        <Tabs.Control value="boat">Boat</Tabs.Control>
        <Tabs.Control value="car">Car</Tabs.Control>
      </Tabs.List>
      <Tabs.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>
      </Tabs.Content>
    </Tabs>
  );
};

API Reference

TabsRoot

Property	Type	Description
`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.
`onValueChange`		Triggers when the value state is changed.
`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
`value`	string	The selected tab id
`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.

TabsList

Property	Type	Description
`base`	string	Set base classes for the list element.
`justify`	string	Set justify classes for the list element.
`border`	string	Set border classes for the list element.
`margin`	string	Set margin classes for the list element.
`gap`	string	Set gap classes for the list element.
`classes`	string	Provide arbitrary classes for the list element.

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`	ReactNode	The lead node for the control element.
`value` *	string	The value of the tab
`disabled`	boolean	Whether the tab is disabled

TabsContent

Property	Type	Description
`base`	string	Set base classes for the panel group element.
`classes`	string	Provide arbitrary classes for the panel group element.

TabsPanel

Property	Type	Description
`base`	string	Set base classes for the panel element.
`classes`	string	Provide arbitrary classes for the panel element.
`value` *	string	The value of the tab