EnterUI
DocsComponentsThemesExamplesDonation
Get Started
      • WizardSteps
      • StepperForm
      • ReleaseStepper

Default usage

  1. EnterUI
  2. /Docs
  3. /Navigation and Overlays
  4. /Navigation
  5. /Step Navigation
  6. /ReleaseStepper
Updated 3 October 2026

ReleaseStepper

Workflow stepper for build, validation, changelog, and publish flows.

ReleaseStepper renders release or deployment progress with explicit statuses for pending, current, complete, failed, and blocked steps.

#Default usage

Release workflow

Use clear statuses for build and publish pipelines.

  1. BuildPackage artifactsComplete
  2. TypecheckValidate public APICurrent
  3. ChangelogPrepare release notesPending
  4. PublishPromote packageBlocked
Code
<ReleaseStepper
  steps={[
    { id: "build", label: "Build", description: "Package artifacts", status: "complete" },
    { id: "typecheck", label: "Typecheck", description: "Validate public API", status: "current" },
    { id: "changelog", label: "Changelog", description: "Prepare release notes", status: "pending" },
    { id: "publish", label: "Publish", description: "Promote package", status: "blocked" },
  ]}
/>

#Import

Code
import { ReleaseStep, ReleaseStepper } from "@froggdesign/enter-ui-react";

#Variants

Code
<ReleaseStepper compact steps={steps} />

#Patterns

Use ReleaseStepper for publish workflows, deployment status, package release preparation, batch operations, and admin review pipelines.

#Accessibility

The current step exposes aria-current="step". Status is rendered as text, not only color.

#API

  • steps: { id, label, description?, status }[].
  • status: pending, current, complete, failed, or blocked.
  • compact: hides descriptions and reduces row height.
  • ReleaseStep: manual item component for custom composition.

#Styling

ReleaseStepper uses .eui-release-stepper classes and FroggDesign tokens for layout, state, focus, and disabled styling.

PreviousStepperForm
NextDialog
On this page
  • Default usage
  • Import
  • Variants
  • Patterns
  • Accessibility
  • API
  • Styling