Navigationstable

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Installation

Install the component directly into your project using the Pittaya CLI.

npx pittaya@latest add tabs

When to use

Use Tabs when you need to organize related content into different categories or views, allowing users to easily switch between them without leaving the current context.

Ideal for settings panels, dashboards with different views, forms with multiple sections, or any interface that benefits from horizontal navigation between related content.

Best practices

Use short and descriptive labels for tabs, preferably a single word or short phrase.
Limit the number of tabs to 5-7 to avoid cognitive overload. If you need more, consider a different navigation pattern.
Maintain consistency in tab order across different pages and contexts.
Avoid nesting tabs within tabs, as this can confuse users about the current context.
Consider adding icons to tabs when it helps with quick visual identification of content.
Each tab's content should be independent and not depend on viewing other tabs.

Accessibility

The component is built on top of @radix-ui/react-tabs, following WAI-ARIA specifications for tabs. This ensures:

Keyboard navigation with left/right arrow keys between tabs.
Full screen reader support with appropriate ARIA roles and attributes.
Visible focus states through defined style classes.
The Tab key moves focus from TabsList to the active content.
The Home and End keys navigate to the first and last tab, respectively.

Ensure that each panel's content is semantic and accessible, maintaining proper heading hierarchies and structure.

Examples

Combine variants and sizes to meet your needs.

Notifications Center

Organize notifications by status - a practical example for dashboards and user interfaces.

New message received

John Doe sent you a message

2 minutes ago

Payment successful

Your subscription has been renewed

1 hour ago

System update

New features are now available

1 day ago

Properties

TSX interface that combines variants and default attributes.

Prop	Type	Default	Description
`defaultValue`	`string`	—	The value of the tab that should be active by default when the component is mounted.
`value`	`string`	—	The controlled value of the active tab. Use in conjunction with onValueChange to create a controlled component.
`onValueChange`	`(value: string) => void`	—	Callback executed when the active tab value changes. Useful for controlled components and analytics tracking.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Defines the orientation of the tabs component, affecting keyboard navigation and layout.
`dir`	`'ltr' \| 'rtl'`	—	The reading direction of the component. Affects keyboard navigation and visual positioning.
`activationMode`	`'automatic' \| 'manual'`	`'automatic'`	Defines whether tabs are activated automatically when focused (automatic) or require Enter/Space (manual).

Search Components