# Steps
URL: /design/components/steps

A numbered rail for processes that happen in order.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

\[interactive preview component StepsSpecimen omitted]

Code for StepsSpecimen preview:

```tsx
"use client";

import { useState, type ReactNode } from "react";
import { Step, Steps } from "@/components/ui/steps";

function StepsSpecimen(): ReactNode {
  return (
    <Steps className="w-full max-w-96">
      <Step>
        <p className="text-sm font-medium">Install the package</p>
        <p className="text-muted-foreground mt-1 text-sm">
          One command adds the runtime and the styles.
        </p>
      </Step>
      <Step>
        <p className="text-sm font-medium">Wrap your app</p>
        <p className="text-muted-foreground mt-1 text-sm">
          The provider carries the thread state.
        </p>
      </Step>
      <Step>
        <p className="text-sm font-medium">Send a message</p>
        <p className="text-muted-foreground mt-1 text-sm">
          The thread streams from your backend.
        </p>
      </Step>
    </Steps>
  );
}
```

## Installation

Copy the source into `components/ui/steps.tsx`. Registry items that depend on it install it automatically.

- code

  import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; export function Steps({ className, ...props }: ComponentProps<"div">) { return ( \<div className={cn("flex min-w-0 flex-col \[counter-reset:step]", className)} {...props} /> ); } export function Step({ className, children, ...props }: ComponentProps<"div">) { return ( \<div className={cn( "group relative flex gap-4 \[counter-increment:step]", className, )} {...props} > \<div className="flex flex-col items-center"> \<div className="bg-muted text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-full text-sm font-medium after:content-\[counter(step)]" /> \<div className="bg-border w-px flex-1 group-last:hidden" /> \</div> \<div className="min-w-0 flex-1 pt-0.5 pb-6 group-last:pb-0 \[&>h3]:mt-0! \[&>h3]:mb-3! \[&>h3]:text-base! \[&>h3]:font-medium!"> {children} \</div> \</div> ); }

* title

  components/ui/steps.tsx

* copyText

  import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; export function Steps({ className, ...props }: ComponentProps<"div">) { return ( \<div className={cn("flex min-w-0 flex-col \[counter-reset:step]", className)} {...props} /> ); } export function Step({ className, children, ...props }: ComponentProps<"div">) { return ( \<div className={cn( "group relative flex gap-4 \[counter-increment:step]", className, )} {...props} > \<div className="flex flex-col items-center"> \<div className="bg-muted text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-full text-sm font-medium after:content-\[counter(step)]" /> \<div className="bg-border w-px flex-1 group-last:hidden" /> \</div> \<div className="min-w-0 flex-1 pt-0.5 pb-6 group-last:pb-0 \[&>h3]:mt-0! \[&>h3]:mb-3! \[&>h3]:text-base! \[&>h3]:font-medium!"> {children} \</div> \</div> ); }

* viewportClassName

  max-h-\[450px]

- language

  tsx

- code

  import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; export function Steps({ className, ...props }: ComponentProps<"div">) { return ( \<div className={cn("flex min-w-0 flex-col \[counter-reset:step]", className)} {...props} /> ); } export function Step({ className, children, ...props }: ComponentProps<"div">) { return ( \<div className={cn( "group relative flex gap-4 \[counter-increment:step]", className, )} {...props} > \<div className="flex flex-col items-center"> \<div className="bg-muted text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-full text-sm font-medium after:content-\[counter(step)]" /> \<div className="bg-border w-px flex-1 group-last:hidden" /> \</div> \<div className="min-w-0 flex-1 pt-0.5 pb-6 group-last:pb-0 \[&>h3]:mt-0! \[&>h3]:mb-3! \[&>h3]:text-base! \[&>h3]:font-medium!"> {children} \</div> \</div> ); }

## Usage

```
import { Step, Steps } from "@/components/ui/steps";

export function Example() {
  return (
    <Steps>
      <Step>Install the package.</Step>
      <Step>Wrap your app in the provider.</Step>
      <Step>Send a message.</Step>
    </Steps>
  );
}
```

The numbers come from a CSS counter, so steps renumber themselves when one is added or removed.

## API Reference

### Steps

The container; resets the counter. Accepts `div` props.

### Step

One entry on the rail; increments the counter and draws the connecting line to the next step. Accepts `div` props.