Ui3nTabs

Tabs component for organizing content into tabbed sections.

Props

Name	Type	Default	Description
id	string | undefined	—	Root element id
modelValue*	number	0	Current active tab index
itemDirection	"horizontal" | "vertical" | undefined	"horizontal"	Direction of tabs
activeColor	string | undefined	—	Active tab color
inactiveColor	string | undefined	—	Inactive tab color
indicatorColor	string | undefined	—	Indicator color
indicatorSize	string | number | undefined	—	Indicator size
indicatorPosition	"reverse" | "normal" | undefined	"normal"	Indicator position

Events

Event Name	Arguments / Value Type	Description
update:modelValue	val: number	—

Slots

Slot Name	Scope Props (v-slot)	Description
#default	—	Default slot

CSS Variables

Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.

Name	Default
--ui3n-tabs-active-color	var(--color-text-control-accent-default)
--ui3n-tabs-height	48px
--ui3n-tabs-inactive-color	var(--color-text-control-primary-default)
--ui3n-tabs-indicator-color	var(--color-border-control-accent-default)
--ui3n-tabs-indicator-position	0
--ui3n-tabs-indicator-size	2px

Usage Examples

Simple tabs

Simple tabs

Basic horizontal tabs

Vertical tabs

Vertical tabs

Tabs with vertical direction

Customized tabs

Customized tabs

Tabs with custom colors and indicator