Tabs

Tabbed interface for organizing content into separate panels with navigation

Basic Tabs

Simple tab navigation with content panels

HomeAboutContact
Welcome to the home page!
Show Code

Tabs Variants

Different tab styles and appearances

BorderedStyle
This tab has borders
LiftedDesign
This tab appears lifted
BoxedLayout
This tab has a boxed style
Show Code

Tabs Sizes

Different tab sizes for various contexts

Example missing props data. Please update to use props-based format.
Show Code

Tabs with Rich Content

Tabs containing complex content and components

DashboardSettings
Total Users
1,234

Welcome to your dashboard overview.

Show Code

Tabs with Disabled State

Tabs with some options disabled

AvailableDisabledEnabled
This tab is available and active.
Show Code

Usage Notes

  • Each tab item needs a unique ID for proper navigation
  • Content can be simple text or complex JSX components
  • Use onTabChange callback for controlled tab switching
  • Bordered variant works well for form-like interfaces
  • Lifted variant adds depth and visual hierarchy
  • Boxed variant provides clear separation between tabs
  • Disabled tabs prevent user interaction but remain visible