# Tabs (/docs/components/tabs)



<ComponentPreview name="tabs-demo" />

## Overview [#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 [#anatomy]

Tabs include a root, list, triggers, and content panels. Each trigger controls one panel.

## Behavior [#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 [#accessibility]

Keep tab labels short and unique. Keyboard users should be able to move through tabs and reach the active panel.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add tabs
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="tabs" title="components/ui/tabs.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"
```

```tsx
<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 [#examples]

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

### Underline Variant [#underline-variant]

<ComponentPreview name="tabs-underline" />

### Vertical Orientation [#vertical-orientation]

<ComponentPreview name="tabs-vertical" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-80" />

### Underline with Vertical Orientation [#underline-with-vertical-orientation]

<ComponentPreview name="tabs-underline-vertical" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-80" />