Tabs

A set of tab panels that are displayed one at a time.

Based on Reka UI Tabs

Key Props

• items: as an array of objects with the following properties:

• label?: string{lang="ts-type"}
• icon?: string{lang="ts-type"}
• avatar?: AvatarProps{lang="ts-type"}
• badge?: string | number | BadgeProps{lang="ts-type"}
• content?: string{lang="ts-type"}
• value?: string | number{lang="ts-type"}
• disabled?: boolean{lang="ts-type"}
• slot?: string{lang="ts-type"}
• class?: any{lang="ts-type"}
• ui?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, leadingAvatarSize?: ClassNameValue, label?: ClassNameValue, trailingBadge?: ClassNameValue, trailingBadgeSize?: ClassNameValue, content?: ClassNameValue }{lang="ts-type"}

::component-code

ignore:

• items
• class

external:

• items

externalTypes:

• TabsItem[]

props: items: - label: Account icon: 'i-lucide-user' content: 'This is the account content.

• color: to change the color of the Tabs.
• variant: to change the variant of the Tabs.
• size: to change the size of the Tabs.
• orientation: to change the orientation of the Tabs.
• slot:

Usage

<UTabs
  <!-- props here -->
/>

Slots

• #content