caliper uidocs
DemoSign inGet Pro

Environment switcher

Pro

Switch between development, preview, staging and production from one control. Production is marked live everywhere it appears, and a notice above risky settings says so in words.

Installs components/ui/environment-switcher.tsxDepends on @radix-ui/react-popover, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/environment-switcher
halden-app /

Settings below apply to staging only.

When to use #

Use it for

  • Developer platforms and admin consoles with several environments.
  • Settings that differ per environment.

Skip it when

  • Switching workspaces or accounts; use the workspace switcher.

Installation #

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

Adds its 3 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. It is built from EnvironmentSwitcher and ProductionNotice.

example.tsx
import { EnvironmentSwitcher, ProductionNotice } from "@/components/ui/environment-switcher"

The worked example comes with Pro

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

Checking your licence…

API reference #

EnvironmentSwitcher

component
PropTypeDefault
environments *readonly Environment[]—
value *string—
onValueChange *(id: string) => void—
labelstring"Environment"
classNamestring—

ProductionNotice

component
PropTypeDefault
namestring"Production"
detailstring"Changes here apply to live customers straight away."
classNamestring—

Accessibility #

It exposes listbox, option and note semantics, with aria-label, aria-hidden, aria-activedescendant and aria-selected kept in step with state.

KeyBehaviour
↓Moves to the next item or value.
↑Moves to the previous item or value.
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.
EnterActivates the focused control.
SpaceActivates the focused control.

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.