Component

Numbered Steps

A static how-it-works step grid with zero-padded ordinal badges, titles, and body copy — ideal for onboarding flows and feature overviews. Not a stateful stepper; use the Steps component for that.

Four steps

The default layout with four items automatically uses a four-column grid.

Create an account

Configure settings

Choose your preferences and connect the tools you already use.

Invite your team

Add teammates to your workspace and assign roles.

Start building

Use our API and components to ship your first feature.

Three steps

Three items produce a three-column grid by default.

Install the package

Add @refraction-ui/react to your project with your package manager.

Import components

Import the components you need directly from the package.

Ship it

Build accessible, themeable UIs with zero configuration.

Custom columns

Pass columns to override the automatic column count — useful for responsive layouts or condensed sidebars.

Install the package

Add @refraction-ui/react to your project with your package manager.

Import components

Import the components you need directly from the package.

Ship it

Build accessible, themeable UIs with zero configuration.

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { NumberedSteps } from '@refraction-ui/react'

const steps = [
  { title: 'Create an account', body: 'Sign up with your email address.' },
  { title: 'Configure settings', body: 'Choose your preferences.' },
  { title: 'Invite your team', body: 'Add teammates to your workspace.' },
  { title: 'Start building', body: 'Use our API to ship your first feature.' },
]

export function HowItWorks() {
  return <NumberedSteps items={steps} />
}

Props

Prop	Type	Default	Description
`items`	`NumberedStepItem[]`	--	The step items to display. Each item has a `title` and `body` string.
`columns`	`number`	--	Override the number of grid columns. Defaults to clamping the item count to 2–5.
`className`	`string`	--	Additional CSS classes to apply to the grid container.