Components Primitives
Process
Explain a short workflow with numbered steps in a fixed two-column layout.
On this page
Examples
An illustrative four-step workflow. Darker badge fills keep the fixed ivory numbers readable.
Preview setting only: fitting scales the 420 px example. Actual size preserves the copied two-column composition and allows contained scrolling.
Preview only: surrounding canvas and spacing. All metrics are illustrative.
'use client';
import { ProcessSteps, type ProcessStep } from '@coreux/ui';
// Illustrative workflow. Darker badge fills keep the fixed ivory numbers readable.
const steps = [
{ number: 1, label: 'Strategy', description: 'Align on outcomes and value.', color: '#116B61' },
{ number: 2, label: 'Product', description: 'Design the right solution.', color: '#2457F5' },
{ number: 3, label: 'Engineering', description: 'Build secure, high-performance software.', color: '#A2392C' },
{ number: 4, label: 'Automation', description: 'Operate, measure, and continuously improve.', color: '#805609' },
] satisfies ProcessStep[];
export default function FourStep() {
return (
<div role="group" aria-label="Illustrative delivery process" style={{ width: 420, background: '#F4F1E9', padding: 24 }}>
<ProcessSteps steps={steps} />
</div>
);
}
Usage
Use ProcessSteps for a short explanatory workflow, such as Strategy → Product → Engineering → Automation. It is a static presentation, not a stepper, progress tracker, or navigation control.
The FourStep seed has four steps in ink. OnDark has three steps in ivory, leaving the last grid cell empty. Both use illustrative process copy. The copied examples use darker badge fills so the package’s fixed ivory numbers remain readable; OnDark replaces the seed’s cobalt field with navy to improve the small supporting text’s contrast.
Two columns are part of the implementation
The package always uses two columns with 16 px row and column gaps at a 16 px root. It shows a decorative arrow after the first item in each row only when another step follows. There are no arrows connecting one row to the next.
Recommend 2–4 concise steps as a design choice. This is not an enforced runtime constraint: empty arrays, longer sequences, duplicate numbers, and long text are not rejected. Supply unique positive sequential numbers, short labels, and brief descriptions yourself.
Changing the grid to one column through className does not change the arrow calculation, which still assumes two columns. Use a different composition when you need a genuinely responsive single-column workflow.
Props
| Prop / type | Default | Description |
|---|---|---|
stepsRequiredProcessStep[] | Required | Required array in display order. Always laid out in two columns; no count, text-length, numbering, or color validation. Recommend 2–4 short steps, with unique numbers for React keys. |
tone"ink" | "ivory" | "ink" | ink uses navy labels/slate descriptions and arrows; ivory uses ivory labels/pale steel descriptions and arrows. The badge number stays ivory in both modes. Does not set a background. |
classNamestring | undefined | Classes merged with cn onto the root element. Other HTML and ARIA attributes are not forwarded; supply semantics on a wrapper. |
ProcessStep
| Prop / type | Default | Description |
|---|---|---|
numberRequirednumber | Required | Displayed as supplied and used as the React key. Choose unique, sequential positive integers; the component does not generate or validate them. |
labelRequiredstring | Required | Required short paragraph text. No heading, list-item semantics, character limit, or automatic truncation. |
descriptionstring | undefined | Optional paragraph below the label; undefined omits it. Empty strings still render a paragraph. Keep it brief enough for a half-width column. |
colorRequiredstring | Required | Required CSS backgroundColor for the 32 px number circle. The 14 px number is always ivory: check contrast against this fill independently of tone. No token-name resolution. |
Accessibility & layout
The root and step containers are divs, with spans for the number badges and paragraphs for labels and descriptions. The arrows are hidden from assistive technology. There are no ordered-list semantics, current-step state, headings, or keyboard interactions. DOM order follows the supplied steps array.
The examples add a named group around the process; they do not turn it into a semantic ordered list. When ordered-list semantics are essential, provide an ordered text explanation alongside it or choose a different composition. Do not describe this component as an accessible interactive stepper.
The number text stays warm ivory in both tones. Each badge color is an unvalidated CSS backgroundColor: check its contrast separately from the labels and descriptions. Tone does not set a surface. The dark example supplies that background in its copied wrapper.
Columns narrow with their container and text can wrap, but the component never stacks at a breakpoint. These examples preserve a 420 px composition inside a labeled preview frame. Fit to canvas scales the whole example; Actual size allows contained horizontal scrolling. That preview behavior is not component responsiveness.
For a full presentation slide around this process, see SocialCarouselSlide’s Process example.
Consumer setup
Browsing, previews, and copying are public. Installing the private @coreux/ui package requires repository read access and permission to use the bundled CoreUX brand fonts.
Follow the one-time installation guide for the pinned Git dependency, Tailwind v4 stylesheet setup, fonts, and troubleshooting. Keep the 'use client' directive in each example; no provider is required.
The quick start walks through a copied StatBlock in a minimal app.
Source & revision
This reference targets @coreux/ui version 0.1.0 at 06f42fd. Types come from its installed declarations; explanations and defaults are checked against this implementation.
Revision and upgrade notes · Contribution and coverage guide
View ProcessSteps source (repository access required)