caliper uidocs
DemoSign inGet Pro

Environment stack

Pro

Development, staging and production as three stacked floors, with the release as a block that travels down them. The list beside it carries the version, the checks and every action. A failed check tints its floor and keeps the block where it is.

Installs components/ui/environment-stack.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/environment-stack
  • Development2.8.1

    Release ready to promote

  • Staging2.8.0

    Healthy

  • Production2.7.4

    Healthy

Release 2.8.1 is on Development.

When to use #

Use it for

  • Promotion flows where a release moves through environments in order.
  • Showing where a release is right now, and what stops it moving.

Skip it when

  • A single environment; use the deploys screen.
  • A switch between environments; use the environment switcher.

Decisions #

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Depth is the order of promotion
The release only moves down the stack and never skips a floor; lift, move and land is the in-transit state.
Gates say why
A button that is off shows the reason in text, so nobody has to guess why Promote is unavailable.

Usage

The parent runs the release
Checks, approvals and rollbacks are yours. You pass where the release is and the actions each floor offers; the part draws and announces it.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/environment-stack

Adds its 6 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { EnvironmentStack } from "@/components/ui/environment-stack"

The worked example comes with Pro

The 47-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

EnvironmentStack

component
PropTypeDefaultDescription
labelstring"Environments"
environments *readonly StackEnvironment[]—Top floor first (development), last floor at the bottom (production).
releaseAt *string—The id of the environment the release is on.
releaseVersion *string—
onAction((environmentId: string, actionId: string) => void)—
statusDepthStatus"ready"
messagesDepthMessages—
onRetry(() => void)—
disabledboolean—
classNamestring—

Accessibility #

It is built on native elements and keeps aria-hidden, aria-label and aria-live in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.