Tabs

Tab 1 content

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

npm

npx love-ui@latest add tabs

Usage

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

The examples show default tabs, underline styling, vertical orientation, and vertical underline styling.

Underline Variant

Tab 1 content

Vertical Orientation

Tab 1 content

Underline with Vertical Orientation

Tab 1 content

On this page