Skip to content

Steps

Numbered steps down a rail, each number joined to the next by a separator.

Installation

npx shadcn@latest add https://osrsui.com/r/steps.json

Usage

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

<Steps>
  <Step n={1} title="Talk to the Cook">He's in the kitchen of Lumbridge Castle.</Step>
  <Step n={2} title="Gather the ingredients">…</Step>
</Steps>

{/* The number on its own, as a badge */}
<StepNumber>3</StepNumber>