Tabs

Organizes content into separate views which users can switch between.

Installation

tsx

import { Tabs } from "madagent";

Default

Account settings and preferences.

With Disabled Tab

This tab is active.

Prop	Type	Default	Description
`tabs*`	`TabItem[]`	-	Array of tab items with id, label, content, and optional disabled
`defaultActiveId`	`string`	-	Initial active tab id (uncontrolled)
`activeId`	`string`	-	Active tab id (controlled)
`onChange`	`(id: string) => void`	-	Callback when the active tab changes

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

محتوى النظرة العامة

Usage

tsx

<div style={{ display: "flex", justifyContent: "center", padding: 20, maxWidth: 400 }}>
  <Tabs
    tabs={[
      { id: "tab1", label: "النظرة العامة", content: "محتوى النظرة العامة" },
      { id: "tab2", label: "التفاصيل", content: "محتوى التفاصيل" },
      { id: "tab3", label: "الإعدادات", content: "محتوى الإعدادات" },
    ]}
  />
</div>