Stepper

A responsive workflow progress list with native link, action, and status steps.@gemologic/sheen · navigation

Playground

orientation

density

<Stepper label="Workspace setup" steps={[{ kind: "status", id: "account", label: "Account", state: "completed" }, { kind: "link", id: "team", label: "Team", state: "current", href: "/setup/team" }, { kind: "status", id: "finish", label: "Finish", state: "upcoming" }]}  density="default" orientation="horizontal"/>

Variant matrix

Workspace setup

orientation: horizontal

orientation: vertical

density: compact

density: default

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/primitives/Stepper.tsx

Tokens

--sheen-color-border-control
--sheen-color-accent-subtle
--sheen-color-success-subtle
--sheen-color-danger-subtle

Accessibility

Role: navigation, progressbar, and ordered listKeyboard: Tab, Shift+Tab, Enter, Space

Do

Use link steps for URL changes and action steps only for in-place operations.

Do not

Do not encode progress only through connector or marker color.

Generated props

Name	Type	Default	Description
`ref`	`HTMLElement \| ((element: HTMLElement) => void)`	—	Native navigation landmark reference.
`label` *	`string`	—	Required navigation and progress name.
`steps` *	`readonly StepperStep[]`	—	Stable-ID status, native-link, or native-button steps with one optional current step.
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	Horizontal flow that stacks responsively, or an always-vertical flow.
`density`	`"compact" \| "default"`	`default`	Default or compact spacing.
`refreshing`	`boolean`	`false`	Marks retained accepted steps busy without replacing them.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.