Steps

Install the package

One command adds the runtime and the styles.

Wrap your app

The provider carries the thread state.

Send a message

The thread streams from your backend.

Installation

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

components/ui/steps.tsx

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.