Tabs

A set of layered sections of content, known as tab panels, that are displayed one at a time.

Usage

STabs({ defaultValue: 'account' }) {
  STabsList() {
    STabsTrigger({ value: 'account', text: 'Account' })
    STabsTrigger({ value: 'password', text: 'Password' })
  }
  STabsContent({ value: 'account' }) {
    Text('Make changes to your account here.')
  }
  STabsContent({ value: 'password' }) {
    Text('Change your password here.')
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Controlled

Bind the active tab with !! like v-model. Icons and disabled triggers are supported.

@Local tab: string = 'music';

STabs({ value: this.tab!! }) {
  STabsList() {
    STabsTrigger({ value: 'music', icon: 'music', text: 'Music' })
    STabsTrigger({ value: 'podcasts', icon: 'mic', text: 'Podcasts' })
    STabsTrigger({ value: 'live', text: 'Live', disabled: true })
  }
  STabsContent({ value: 'music' }) { ... }
  STabsContent({ value: 'podcasts' }) { ... }
}
SButton({ text: 'Show podcasts' }).onClick(() => this.tab = 'podcasts')

Approximate web preview — the HarmonyOS rendering is the reference.

Overflow

Without breakpoints: when the triggers are wider than the space the list gets, it scrolls horizontally.

// the list scrolls horizontally when it does not fit
Column() {
  STabs({ defaultValue: 'overview' }) {
    STabsList() {
      STabsTrigger({ value: 'overview', text: 'Overview' })
      STabsTrigger({ value: 'analytics', text: 'Analytics' })
      STabsTrigger({ value: 'reports', text: 'Reports' })
      STabsTrigger({ value: 'notifications', text: 'Notifications' })
      STabsTrigger({ value: 'settings', text: 'Settings' })
    }
  }
}
.constraintSize({ maxWidth: 280 })

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

STabs

shadcn-vue Tabs: a set of layered sections of content, one shown at a time.

Prop	Type	Default	Description
value!!	string | undefined	undefined	Controlled active tab (use with !!). Leave undefined for uncontrolled.
defaultValue	string	''

Event	Type	Default	Description
onValueChange	(value: string) => void	() => { }

Slots: children (trailing closure)

STabsList

The tab strip: bg-muted text-muted-foreground inline-flex h-9 w-fit rounded-lg p-[3px]. Responsive: when the triggers are wider than the space the list gets, the strip scrolls horizontally.

Prop	Type	Default	Description
tokens	TabsTokens	{}	Per-instance token overrides (instance → theme --tabs-* → recipe), see {@link TabsTokens}.

Slots: children (trailing closure)

STabsTrigger

A tab button. rounded-md px-2 py-1 text-sm font-medium; active: bg-background shadow-sm (dark: bg-input/30 border-input). Activates its tab when tapped; the native .onClick() on the trigger itself is not needed (use onValueChange on STabs).

Prop	Type	Default	Description
value	string	''
text	ResourceStr | undefined	undefined
icon	string | undefined	undefined	Leading lucide icon name.
disabled	boolean	false

Slots: children (trailing closure)

STabsContent

Panel shown while its value is the active tab (fades in).

Prop	Type	Default	Description
value	string	''

Slots: children (trailing closure)