# Steps

> A "how it works" sequence as an ordered list, so the order is in the markup and not only in the visible numbers.

Facade UI item `steps` (block, section).
Docs page: https://facadeui.dev/components/steps · Registry JSON: https://facadeui.dev/r/steps.json

## Install

```bash
npx shadcn@latest add @facade/steps
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/steps.json`. The CLI also installs what it needs: @facade/container, @facade/feature-icon, @facade/heading, @facade/section, @facade/section-header, @facade/types, @facade/utils.

Files: `components/sections/steps.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/steps-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { Steps } from "@/components/sections/steps"

import { STEPS } from "./content"

export function Demo() {
  return (
    <Steps
      eyebrow="Getting started"
      title="From nothing to a landing page"
      description="An ordered list, so a screen reader already announces 'step 2 of 3' without the numeral being read twice."
      items={STEPS}
    />
  )
}
```

## Props

### StepsProps

Extends SectionBaseProps, ListSlotProps.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `StepItem[]` |  |  |
| `title` | `string` |  |  |
| `eyebrow` | `string` |  |  |
| `description` | `string` |  |  |
| `itemHeadingLevel` | `HeadingLevel` |  |  |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |  |
| `align` | `"start" \| "center"` | `"center"` |  |