Steps

A numbered step list for tutorials, walkthroughs, and sequential instructions.

Preview

Default

Install the package

Run bun add @semajsx/ui in your project.

Import the component

Add the import to your file.

Use in your JSX

Render the component with your props.

Usage

tsx

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

<Steps>
  <Step number={1} title="Install">
    Run the install command.
  </Step>
  <Step number={2} title="Configure">
    Set up your config file.
  </Step>
  <Step number={3} title="Deploy">
    Push to production.
  </Step>
</Steps>;

Components

Steps

Container for the step list.

Step

Individual step item.

Prop	Type	Default	Description
`title`	`string`	—	Step heading
`number`	`number`	—	Step number
`children`	`JSXNode`	—	Step description content