tabs

Tabs

Switches between panels of related content, such as a product's description and details; a filled or underlined list, in a row or a column, mirrored in a right-to-left page.

States: Default, Hover, Focus, Disabled

Parts

Part	File	Does
Tabs	Tabs.vue	Groups all parts of the tabs, which switch between panels of content.
TabsContent	TabsContent.vue	Holds what its tab shows while that tab is selected.
TabsList	TabsList.vue	Groups the triggers that switch between the tabs.
TabsTrigger	TabsTrigger.vue	Lets the user switch to its tab.

Anatomy

<Tabs>
  <TabsList>
    <TabsTrigger />
  </TabsList>
  <TabsContent />
</Tabs>

Styling

Part	Recipe
Tabs	tabs
TabsContent	tabs-content
TabsList	tabs-list
TabsTrigger	tabs-trigger
TabsTrigger	tabs-trigger-indicator

Install

Writes 6 files into components/ui/tabs/. For agents, npx @frontic/ui docs tabs prints this reference as markdown; the MCP server serves the same.

npm packages: @vueuse/core; class-variance-authority; reka-ui

API reference

Tabs Tabs.vue

Groups all parts of the tabs, which switch between panels of content.

Prop	Type	Default
defaultValue	StringOrNumber	—

orientation	DataOrientation	'horizontal'

dir	Direction	—

activationMode	'automatic' \| 'manual'	'automatic'

modelValue	StringOrNumber	—

unmountOnHide	boolean	true

asChild	boolean	false

as	AsTag \| Component	—
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default —
class	ClassValue	—

Event	Payload
update:modelValue	payload: StringOrNumber

Slot	Slot props
default	{ modelValue: string \| number \| undefined; }

Data attribute	Values
data-horizontal	—

data-orientation	'vertical' \| 'horizontal'

data-vertical	—

Recipe tabs	Sets
base: tabs	2 properties

TabsContent TabsContent.vue

TabsList TabsList.vue

TabsTrigger TabsTrigger.vue

Example