Tabs
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
A component for toggling between related panels on the same page.
Overview
Use Tabs to switch between related panels without leaving the current page.
Tabs are useful for settings sections, profile views, code examples, billing panels, and compact content groups. The panels should be peers, not steps in a process.
Anatomy
Tabs include a root, list, triggers, and content panels. Each trigger controls one panel.
Behavior
Use horizontal tabs for most layouts. Use vertical tabs when labels are longer or when the tab list acts like a side navigation within a page.
Accessibility
Keep tab labels short and unique. Keyboard users should be able to move through tabs and reach the active panel.
Installation
npx honestui@latest add tabsUsage
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"<Tabs defaultValue="tab-1">
<TabsList>
<TabsTab value="tab-1">Tab 1</TabsTab>
<TabsTab value="tab-2">Tab 2</TabsTab>
<TabsTab value="tab-3">Tab 3</TabsTab>
</TabsList>
<TabsPanel value="tab-1">Tab 1 content</TabsPanel>
<TabsPanel value="tab-2">Tab 2 content</TabsPanel>
<TabsPanel value="tab-3">Tab 3 content</TabsPanel>
</Tabs>Examples
Our examples cover default tabs, underline styling, vertical orientation, and vertical underline styling.