1# Stepper
2 
3A set of steps that are used to indicate progress through a multi-step process.
4 
5> Based on [Reka UI Stepper](https://reka-ui.com/docs/components/stepper)
6 
7## Key Props
8 
9- `items`: as an array of objects with the following properties:
10 
11- `title?: string`{lang="ts-type"}
12- `description?: AvatarProps`{lang="ts-type"}
13- `content?: string`{lang="ts-type"}
14- `icon?: string`{lang="ts-type"}
15- `value?: string | number`{lang="ts-type"}
16- `disabled?: boolean`{lang="ts-type"}
17- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
18- `class?: any`{lang="ts-type"}
19- `ui?: { item?: ClassNameValue, container?: ClassNameValue, trigger?: ClassNameValue, indicator?: ClassNameValue, icon?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
20 
21## ::component-code
22 
23ignore:
24 
25- items
26- class
27  external:
28- items
29  externalTypes:
30- StepperItem[]
31  props:
32  items: - title: 'Address'
33  description: 'Add your address here'
34  icon: 'i-lucide-house' - title: 'Shipping'
35  description: 'Set your preferred shipping method'
36  icon: 'i-lucide-truck' - title: 'Checkout'
37  description: 'Confirm your order'
38  class: 'w-full'
39 
40---
41 
42::
43 
44::note
45Click on the items to navigate through the steps.
46 
47- `color`: to change the color of the Stepper.
48- `size`: to change the size of the Stepper.
49- `orientation`: to change the orientation of the Stepper.
50- `disabled`: to disable navigation through the steps.
51- `slot`:
52 
53## Usage
54 
55```vue
56<UStepper
57  <!-- props here -->
58/>
59```
60 
61## Slots
62 
63- `#content`
64