---
title: "Tabs"
description: "Organize related content in interactive tabbed interfaces."
canonical_url: "https://ui.nuxt.com/docs/typography/tabs"
last_updated: "2026-05-07"
---
# Tabs

> Organize related content in interactive tabbed interfaces.

## Usage

Use the `tabs` and `tabs-item` components to display [Tabs](/docs/components/tabs) in your content.

```vue
<template>
  <__flatten>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::callout
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  callout
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre>
  <blockquote>
  <p>
  [!NOTE]</p>
  <p>
  Lorem velit voluptate ex reprehenderit ullamco et culpa.</p></blockquote></__flatten>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::tabs
  
  :::tabs-item{label="Code" icon="i-lucide-code"}
  
  ```mdc
  ::callout
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  ::
  ```
  
  :::
  
  :::tabs-item{label="Preview" icon="i-lucide-eye"}
  
  ::callout
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  ::
  
  :::
  
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  tabs
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  :::</span>
  <span class=swJcz>
  tabs-item</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  label</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  Code</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   icon</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  <i class=shiki-icon-highlight saAPq />
  i-lucide-code</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  mdc
  </span></span>
  <span class=line>
  <span class=sJsPd>
  ::callout
  </span></span>
  <span class=line>
  <span class=sJsPd>
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  </span></span>
  <span class=line>
  <span class=sJsPd>
  ::
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  :::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  :::</span>
  <span class=swJcz>
  tabs-item</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  label</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  Preview</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   icon</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  <i class=shiki-icon-highlight sfWZU />
  i-lucide-eye</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  callout
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  :::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ProseTabs component
 */
interface ProseTabsProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  items?: T[] | undefined;
  color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" | undefined;
  variant?: "pill" | "link" | undefined;
  size?: "sm" | "xs" | "md" | "lg" | "xl" | undefined;
  /**
   * The orientation of the tabs.
   * @default "\"horizontal\""
   */
  orientation?: "horizontal" | "vertical" | undefined;
  /**
   * The content of the tabs, can be disabled to prevent rendering the content.
   * @default "true"
   */
  content?: boolean | undefined;
  /**
   * The key used to get the value from the item.
   * @default "\"value\""
   */
  valueKey?: GetItemKeys<T> | undefined;
  /**
   * The key used to get the label from the item.
   * @default "\"label\""
   */
  labelKey?: GetItemKeys<T> | undefined;
  ui?: { root?: ClassNameValue; list?: ClassNameValue; indicator?: ClassNameValue; trigger?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; label?: ClassNameValue; trailingBadge?: ClassNameValue; trailingBadgeSize?: ClassNameValue; content?: ClassNameValue; } | undefined;
  /**
   * The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
   * @default "\"0\""
   */
  defaultValue?: string | number | undefined;
  /**
   * The controlled value of the tab to activate. Can be bind as `v-model`.
   */
  modelValue?: string | number | undefined;
  /**
   * Whether a tab is activated automatically (on focus) or manually (on click).
   */
  activationMode?: "automatic" | "manual" | undefined;
  /**
   * When `true`, the element will be unmounted on closed state.
   * @default "true"
   */
  unmountOnHide?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Tabs component
 */
interface TabsSlots {
  leading(): any;
  default(): any;
  trailing(): any;
  content(): any;
  list-leading(): any;
  list-trailing(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      tabs: {
        slots: {
          root: 'my-5 gap-4'
        }
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/prose/Tabs.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/tabs.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.