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 |
|
The default tab to select. |
sync |
Sync the selected tab with a local storage key. | |
hash |
The hash to scroll to when the tab is selected. | |
modelValue |
|
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'
}
}
}
})
]
})