Tabs
Tabs are used to display content in a single container.
Loading Code Block...Full example
Section titled “Full example”Dashboard Overview
Welcome to your dashboard. Here you can view key metrics and recent activity.
Total Users
1,234
Revenue
$45,678
Loading Code Block...Tabs with badges
Section titled “Tabs with badges”Dashboard Overview
Welcome to your dashboard. Here you can view key metrics and recent activity.
Total Users
1,234
Revenue
$45,678
Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| tabs | - | TabItem[] | Array of tab items. Each item requires a unique `id: string` (used for selection identity, both frameworks) and `tabName`, plus optional `href`, `content`, `active` boolean, `icon`, and `count` badge. |
| activeTabId | - | string | Initially active tab, matched by `id`. Falls back to the first item with `active: true`, then to the first item. |
| showBadges | true | boolean | If set, the tabs will have badges. |
| showIcons | true | boolean | If set, the tabs will have icons. |
| badgeBgColor | bg-purple-500 | string | Background color for badges (Tailwind class). |
| badgeTextColor | text-white | string | Text color for badges (Tailwind class). |
| activeColor | text-theme-text-accent border-theme-border-primary | string | Text and color for tab items when active (Tailwind class). |
| textColor | text-theme-text-secondary | string | Text color for inactive tab labels (Tailwind class). |
| hoverColor | hover:border-theme-border-default hover:bg-theme-bg-default-hover focus:bg-theme-bg-default-press | string | Hover and focus styles applied to inactive tabs (Tailwind classes). |
| activeTextColor | text-theme-text-secondary | string | Text color for the active tab label inside the mobile dropdown (Tailwind class). Desktop active label color is controlled by `activeColor`. |
| onChange | - | function | React-only. Callback `(tab: TabItem) => void` invoked when a tab is selected. Vue exposes the same event as `@change` (emits the selected `TabItem`). |
TabItem fields
Section titled “TabItem fields”| Props | Default | Type | Description |
|---|---|---|---|
| id | - | string | **Required.** Stable identifier used for selection. Two items with the same `id` are treated as the same tab. |
| tabName | - | string | Visible label for the tab. |
| href | - | string | **Required.** Anchor target rendered on the desktop tab `<a>`. Click handling calls `preventDefault()` — navigation is the consumer's responsibility; `href` is kept for accessibility and link semantics. |
| content | - | ReactNode | VNode | Panel content rendered when the tab is active. In Vue, the preferred surface is a named slot keyed by the tab `id` (`<template #my-tab-id>…</template>`); `content` is used as a fallback when no matching slot is provided. |
| active | false | boolean | Marks an item as initially active. Overridden by `activeTabId` on the parent. |
| icon | - | ReactNode | VNode | Optional leading icon rendered when `showIcons` is true. |
| count | - | string | number | Optional badge value rendered when `showBadges` is true. |
Accessibility
Section titled “Accessibility”- Tab lists utilize appropriate ARIA roles (
role="tablist",role="tab", androle="tabpanel") to ensure screen readers announce correctly which tab is currently selected. - Keyboard navigation behaves such that users can ‘tab’ to enter the tab list, use the Left and Right arrows to move between tabs natively, and use ‘Enter’ or ‘Space’ to select them.