1# Tabs
2 
3A set of tab panels that are displayed one at a time.
4 
5> Based on [Reka UI Tabs](https://reka-ui.com/docs/components/tabs)
6 
7## Key Props
8 
9- `items`: as an array of objects with the following properties:
10 
11- `label?: string`{lang="ts-type"}
12- `icon?: string`{lang="ts-type"}
13- `avatar?: AvatarProps`{lang="ts-type"}
14- `badge?: string | number | BadgeProps`{lang="ts-type"}
15- `content?: string`{lang="ts-type"}
16- `value?: string | number`{lang="ts-type"}
17- `disabled?: boolean`{lang="ts-type"}
18- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
19- `class?: any`{lang="ts-type"}
20- `ui?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, leadingAvatarSize?: ClassNameValue, label?: ClassNameValue, trailingBadge?: ClassNameValue, trailingBadgeSize?: ClassNameValue, content?: ClassNameValue }`{lang="ts-type"}
21 
22## ::component-code
23 
24ignore:
25 
26- items
27- class
28  external:
29- items
30  externalTypes:
31- TabsItem[]
32  props:
33  items: - label: Account
34  icon: 'i-lucide-user'
35  content: 'This is the account content.
36- `color`: to change the color of the Tabs.
37- `variant`: to change the variant of the Tabs.
38- `size`: to change the size of the Tabs.
39- `orientation`: to change the orientation of the Tabs.
40- `slot`:
41 
42## Usage
43 
44```vue
45<UTabs
46  <!-- props here -->
47/>
48```
49 
50## Slots
51 
52- `#content`
53