Tabs

GitHub
Organize related content in interactive tabbed interfaces.

Usage

Use the tabs and tabs-item components to display Tabs in your content.

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

::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.
::

:::

::

API

Props

Prop Default Type
defaultValue

'0'

string

The default tab to select.

sync

string

Sync the selected tab with a local storage key.

hash

string

The hash to scroll to when the tab is selected.

modelValue

string

ui

{ root?: ClassNameValue; } & { root?: ClassNameValue; list?: ClassNameValue; indicator?: ClassNameValue; trigger?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; label?: ClassNameValue; trailingBadge?: ClassNameValue; trailingBadgeSize?: ClassNameValue; content?: ClassNameValue; }

Slots

Slot Type
default

{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      tabs: {
        slots: {
          root: 'my-5 gap-4'
        }
      },
      tabsItem: {
        base: '*:first:mt-0 *:last:mb-0 *:my-1.5'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          tabs: {
            slots: {
              root: 'my-5 gap-4'
            }
          },
          tabsItem: {
            base: '*:first:mt-0 *:last:mb-0 *:my-1.5'
          }
        }
      }
    })
  ]
})

Changelog

63c0a — feat: expose ui in slot props where used (#5207)

340fc — fix: use nullish coalescing on item value

11a03 — fix: dot notation type support for labelKey and valueKey (#4933)

61b60 — feat: allow passing a component instead of a name (#4766)

5cb65 — feat: import @nuxt/ui-pro components

fbec2 — fix: add missing Badge import (#4594)

b2289 — fix: display badge when not undefined

62ab0 — feat: add badge on items (#4553)

7a2bd — feat: expose trigger refs

b9adc — feat: add ui field in items (#4060)

e6e51 — fix: class should have priority over ui prop

39c86 — fix: refactor types after @nuxt/module-builder upgrade (#3855)

3447a — feat: add list-leading and list-trailing slots (#3837)

b9983 — fix: improve generic types (#3331)

ef861 — chore: add eol in script tag to fix syntax highlight

Steps

Transform headings into numbered step-by-step guides and tutorials.