BeatUI Documentation

Size
Orientation
Disabled
Show Content

Basic Tabs

A simple tabs component with different content panels.

Overview

This is the overview tab content. It provides a general introduction to the topic.

Size Variations

Tabs component supports different sizes from xs to xl.

Size: xs

Size: sm

Size: md

Size: lg

Size: xl

Vertical Orientation

Tabs can be displayed vertically for sidebar-style navigation.

Overview

This is the overview tab content. It provides a general introduction to the topic.

Accessibility Features

Keyboard Navigation

  • Arrow keys: Navigate between tabs
  • Home/End: Jump to first/last tab
  • Enter/Space: Activate focused tab
  • Tab: Move focus to tab content

ARIA Support

  • Proper role attributes (tablist, tab, tabpanel)
  • aria-selected for active tab state
  • aria-controls linking tabs to panels
  • aria-labelledby linking panels to tabs
  • aria-disabled for disabled tabs