# Steps

Numbered ordered list for sequential flows. Children should be `<li>` elements — there is no active-step prop; mark the current step with `aria-current="step"` on the list item.

## Examples

### Default

Three setup steps.

```tsx
import { Steps } from '@var-ui/react';

<Steps>
  <li>Install package</li>
  <li>Import styles</li>
  <li>Render components</li>
</Steps>
```

```astro
---
import { Steps } from '@var-ui/astro';
---
<Steps>
  <li>Install package</li>
  <li>Import styles</li>
  <li>Render components</li>
</Steps>
```

```html
<ol class="var-ui-steps">
  <li>Install package</li>
  <li>Import styles</li>
  <li>Render components</li>
</ol>
```

### Active step

Highlight the current step with `aria-current="step"` on the active `<li>`.

```tsx
import { Steps } from '@var-ui/react';

<Steps>
  <li>Choose a plan</li>
  <li aria-current="step">Enter billing details</li>
  <li>Confirm purchase</li>
</Steps>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  |  |
| className | string \| undefined | no |  |  |

## Accessibility

Renders an `<ol>`. Use `aria-current="step"` on the active list item so assistive tech can announce progress. Keep step labels concise and sequential.