Tabs
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.
::
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' | stringThe default tab to select. |
sync | stringSync the selected tab with a local storage key. | |
hash | stringThe 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'
}
}
}
})
]
})