Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 4. ⚡️  Build and prototype fast web applications.

Indielayer
Indielayer UIIndielayer UI
UI
v2.1.0

Tabs

Tabbed navigation that switches between related views in the same region. Use x-tab-group with x-tab when content shares context but not space.

#
Usage

Basic example with common props.

Compact

Automatic link as value

Tabs link
Tabs link B

#API

TabGroup

props

Name
Description
Type
Default
Values
Required
size
Control size. One of xs, sm, md, lg, xl.
String
md
xssmmdlgxl
color
Theme or CSS color used for the control accents.
String
primary
modelValue
Active tab value (v-model).
String
Number
variant
Visual style of the tab list (line, block, or compact).
String
line
lineblockcompact
align
Horizontal alignment of tabs in the list.
String
left
leftcenterright
ghost
Subtle styling with less background emphasis.
Boolean
false
grow
Stretches tabs to fill the list width.
Boolean
false
exact
Default exact route matching for linked tabs.
Boolean
false
fullWidth
Stretches the tab list to the container width.
Boolean
true

slots

Name
Description
default
Tab triggers (typically x-tab children).

emits

Name
Description
update:modelValue
Emitted when the active tab changes (v-model).

Tab

props

Name
Description
Type
Default
Values
Required
size
Tab size. Falls back to the parent tab group size when omitted.
String
xssmmdlgxl
value
Value used to select this tab in the group.
String
Number
tag
Root element tag when not using `to`.
String
button
to
Vue Router location; renders as a link when set.
String
Object
label
Visible label. Defaults to `value` when omitted.
String
icon
Icon name shown before the label.
String
tooltip
Tooltip text. Prefer the tooltip slot for custom content.
String
tooltipPosition
Tooltip placement relative to the tab.
String
top
disabled
Prevents selecting this tab.
Boolean
false
exact
Requires exact route match when using `to`.
Boolean
false
removable
Shows a remove control that emits `remove`.
Boolean
false

slots

Name
Description
default
Tab panel content shown when this tab is selected.
tab
Custom tab trigger content. Slot props: label, value, size, icon.
tooltip
Custom tooltip content; overrides the `tooltip` prop.

emits

Name
Description
remove
Emitted when the remove control is clicked.
table
tag