GitHub

Process Steps

Block
Static step display with connector lines and layout options

Basic Usage

Loading...

Installation

pnpm add @corew500/ui

Usage

import { ProcessSteps } from "@corew500/ui/blocks/process-steps"

<ProcessSteps>Content</ProcessSteps>

Horizontal

Loading...

CMS Integration

CMSPayload CMS Integration
This component supports CMS-driven content via @corew500/cms-payload.
Loading...

API Reference

Props

PropTypeDefaultDescription
steps*ProcessStep[]—Array of steps to display
layoutenumverticalLayout direction. - `vertical`: Steps stacked vertically with connectors on the left - `horizontal`: Steps in a row with connectors between them
connectorenumlineConnector line style. - `line`: Solid line - `dashed`: Dashed line - `none`: No connector
indicatorStyleenumnumberIndicator display style. - `number`: Show step number (1, 2, 3...) - `icon`: Use the step's indicator prop as-is - `dot`: Show a simple dot
alternateenumfalseAlternate step alignment (zigzag pattern). Only applies to vertical layout.

Accessibility

Screen Readers

  • - Uses semantic list markup (ol > li) for screen readers
  • Connector lines are decorative (aria-hidden)

Additional

  • Step titles provide accessible content

Localization

Translatable Content

  • - Component accepts pre-resolved translated strings
  • All text customizable: title, description, badge

Related

Related Components

processStepsVariants