# stepper — Examples

## Horizontal (default)

```html
<stepper-ui step="2">
  <stepper-item-ui text="Account"></stepper-item-ui>
  <stepper-item-ui text="Details"></stepper-item-ui>
  <stepper-item-ui text="Review"></stepper-item-ui>
  <stepper-item-ui text="Confirm"></stepper-item-ui>
</stepper-ui>
```

## Vertical

```html
<stepper-ui orientation="vertical" step="1">
  <stepper-item-ui text="Select plan" description="Choose your subscription"></stepper-item-ui>
  <stepper-item-ui text="Payment" description="Enter payment details"></stepper-item-ui>
  <stepper-item-ui text="Confirmation" description="Review and submit"></stepper-item-ui>
</stepper-ui>
```

## Interactive

```html
<stepper-ui id="stepper-interactive" step="1">
  <stepper-item-ui text="Step 1"></stepper-item-ui>
  <stepper-item-ui text="Step 2"></stepper-item-ui>
  <stepper-item-ui text="Step 3"></stepper-item-ui>
  <stepper-item-ui text="Step 4"></stepper-item-ui>
</stepper-ui>
<div style="display:flex; gap:var(--a-space-2); margin-top:var(--a-space-3);">
  <button-ui id="stepper-prev" text="Previous" variant="outline"></button-ui>
  <button-ui id="stepper-next" text="Next" variant="primary"></button-ui>
</div>
```
