Tabs

The Tabs component provides a flexible tab switcher with optional icons, variants, and RTL/LTR support.

import { Tabs } from "tawuniya/components";

👉 View in Storybook

---

Props

Prop	Type	Default	Description
tabs	{ label: string; key: string; icon?: React.ReactNode; }[]	—	List of tabs to render.
defaultTab	string	—	Key of the initially selected tab.
value	string	—	Controlled value for the currently active tab.
variant	"default" | "filled" | "filled_primary" | "underlined"	"default"	Visual style variant for the tabs.	"default"	Visual style variant for the tabs.
wrapperClassName	string	—	Additional Tailwind classes for the outer wrapper.
className	string	—	Additional Tailwind classes for the tabs list.
children	React.ReactNode	—	Content to render inside the tabs.
onValueChange	(value: string) => void	—	Callback when the active tab changes.
unmount	boolean	false	When true, inactive tab panels are unmounted from the DOM, losing their state. Defaults to false.

Usage

Basic Example

<Tabs
  defaultTab="tab1"
  tabs={[
    { label: "Tab 1", key: "tab1" },
    { label: "Tab 2", key: "tab2" },
    { label: "Tab 3", key: "tab3", icon: <SomeIcon /> },
  ]}
>
  <TabsContent value="tab1">Tab1</TabsContent>
  <TabsContent value="tab2">Tab2</TabsContent>
  <TabsContent value="tab3">Tab3</TabsContent>
</Tabs>

Controlled Example

import { Tabs, TabsContent } from "tawuniya/components";

export default function Example() {
  const [activeTab, setActiveTab] = useState("tab2");

  return (
    <Tabs
      tabs={[
        { label: "Tab 1", key: "tab1" },
        { label: "Tab 2", key: "tab2" },
        { label: "Tab 3", key: "tab3" },
      ]}
      value={activeTab}
      onValueChange={setActiveTab}
    >
      <TabsContent value="tab1">Tab1</TabsContent>
      <TabsContent value="tab2">Tab2</TabsContent>
      <TabsContent value="tab3">Tab3</TabsContent>
    </Tabs>
  );
}

Variant Example

<Tabs
  defaultTab="tab1"
  variant="underlined"
  tabs={[
    { label: "Tab 1", key: "tab1" },
    { label: "Tab 2", key: "tab2" },
    { label: "Tab 3", key: "tab3", icon: <SomeIcon /> },
  ]}
>
  <TabsContent value="tab1">Tab1</TabsContent>
  <TabsContent value="tab2">Tab2</TabsContent>
  <TabsContent value="tab3">Tab3</TabsContent>
</Tabs>

Unmount Example

<Tabs
  defaultTab="tab1"
  tabs={[
    { label: "Tab 1", key: "tab1" },
    { label: "Tab 2", key: "tab2" },
    { label: "Tab 3", key: "tab3", icon: <SomeIcon /> },
  ]}
  unmount
>
  <TabsContent value="tab1">Tab1</TabsContent>
  <TabsContent value="tab2">Tab2</TabsContent>
  <TabsContent value="tab3">Tab3</TabsContent>
</Tabs>

Features

• Supports icons in tabs.
• Multiple variants: default, filled, underlined.
• Fully controlled or uncontrolled behavior.
• Responsive tab list with scroll overflow for many tabs.