Tabs

A tabbed interface for organizing content into panels with support for icons, badges, keyboard navigation, and various visual variants.

Import#

import { Tabs } from "asheeui";

Usage#

import { Tabs } from "asheeui";

const tabs = [
	{ id: "tab1", label: "Tab 1", content: <div>Content 1</div> },
	{ id: "tab2", label: "Tab 2", content: <div>Content 2</div> },
	{ id: "tab3", label: "Tab 3", content: <div>Content 3</div> },
];

export default function Basic() {
	return <Tabs tabs={tabs} />;
}

Examples#

Variant#

Size#

Radius#

Active tab styling#

With icons#

With badges#

Controlled#

Uncontrolled with default#

Disabled tabs#

Full width#

Custom tab styling#

Per-tab active styling#

Props#

* Falls back through Global Configuration if not set. See below.

TabItem#

Global Configuration#

Tabs reads defaults from four places, in this order of precedence:

1. Instance prop: set directly on <Tabs />
2. Component config: components.tabs in your ashee.config
3. Theme default: defaultColor / defaultRadius in your ashee.config
4. Built-in fallback: component's internal default values

Component config#

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    tabs: {
      size: "md",
      variant: "underline",
      radius: "md",
      activeRadius: "md",
      activeVariant: "solid",
      activeColor: "primary",
    },
  },
};

Built-in fallbacks#

{
  size: "md",
  variant: "underline",
  radius: "md",
  activeRadius: "md",
  activeVariant: "solid",
  activeColor: "primary",
}

Accessibility#

• Uses proper ARIA roles: tablist, tab, tabpanel
• Uses aria-selected to indicate active tab
• Uses aria-controls and aria-labelledby for associations
• Supports keyboard navigation with Arrow Left/Right, Home, and End keys
• Disabled tabs are skipped in keyboard navigation
• Focus management for active tab
• Implements focus-visible rings for keyboard navigation

Notes#

• Controlled vs Uncontrolled: Use activeId/onChange for controlled usage, or defaultActiveId for uncontrolled.
• Per-tab Overrides: Each tab can override the active variant and color using activeVariant and activeColor properties.
• Variant Behavior: underline shows an underline indicator, bordered wraps tabs in a bordered container, ghost uses minimal styling with gaps.
• Full Width: When fullWidth is true, tabs stretch to fill the container width evenly.
• Badges: Badges are rendered as small rounded indicators next to tab labels.
• Disabled Tabs: Disabled tabs cannot be focused or selected and are skipped during keyboard navigation.