Steps

<Steps
items={[
  { title: 'Cart', description: 'Review your items' },
  { title: 'Shipping', description: 'Add your address' },
  { title: 'Payment', description: 'Enter payment details' },
  { title: 'Confirm' },
]}
current={2}
/>

Add

npx @ava-ui/apogee add steps

No Apogee component dependencies. Depends on @lucide/astro (renders the done-step check icon).

Usage

---
import Steps from '@/components/apogee/Steps/Steps.astro'
---
<Steps
  items={[
    { title: 'Cart' },
    { title: 'Shipping' },
    { title: 'Payment' },
  ]}
  current={2}
/>

API

@composable — exposed to Content Editors in AVA. Any other attribute passes through to the root <ol>.

States

A step’s visual state is derived from its position relative to current:

• Done (n < current) — filled accent indicator with a check icon.
• Current (n === current) — accent-outlined indicator with the step number; the list item carries aria-current="step".
• Upcoming (n > current) — muted indicator with the step number, muted title.

<Steps items={[{ title: 'One' }, { title: 'Two' }, { title: 'Three' }]} current={1} />

<Steps items={[{ title: 'One' }, { title: 'Two' }, { title: 'Three' }]} current={2} />

<Steps items={[{ title: 'One' }, { title: 'Two' }, { title: 'Three' }]} current={4} />

Orientation

One render, stacked on phones and across from md. The connector after a done step turns primary.

<Steps orientation={{ base: 'vertical', md: 'horizontal' }} current={2} items={[…]} />

Only md given: below it the default vertical applies.

<Steps orientation={{ md: 'horizontal' }} current={2} items={[…]} />

Markers and size

<Steps marker="dot" size="small" orientation="horizontal" current={2} items={[…]} />
<Steps marker="icon" orientation="horizontal" current={3} items={[{ title: 'Account', icon: User }, …]} />

Status

items[].status marks a step done out of order (a wizard where steps can be filled in any order):

<Steps current={2} items={[{ title: 'Profile' }, { title: 'Address' }, { title: 'Documents' }, { title: 'Photo', status: 'done' }]} />

For a bar or dots with no labels, use ProgressIndicator.

Examples

Compact, without descriptions:

<Steps items={[{ title: 'Draft' }, { title: 'Review' }, { title: 'Publish' }]} current={3} />

Mark the whole flow complete by setting current past the last step:

<Steps items={steps} current={steps.length + 1} />

Accessibility

• The <ol> conveys the sequence to assistive tech on its own — it’s a real ordered list.
• The active step’s list item gets aria-current="step", so its title is what screen readers announce as the current step.
• The connector line and the check icon inside a done indicator are aria-hidden — decorative.
• Native semantics, no extra ARIA needed beyond aria-current.

Tokens

Do / Don’t

• Do keep title to one to three words; put detail in description.
• Do set current to items.length + 1 once the flow is complete, so every step shows done.
• Don’t use Steps for parallel, unordered content — use Tabs.
• Don’t skip numbers in the sequence — current is a plain 1-based index into items.

Content

• title is a short noun phrase naming the step (“Shipping”), sentence case, no ending punctuation.
• description is one short sentence or fragment — skip the trailing period for fragments, use it for full sentences.