caliper uidocs
DemoSign inGet Pro

Settings screen

Pro

Settings that show what changed before you save: an ember mark and the previous value on each field, one bar that names the changes.

Installs components/ui/settings-screen.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/settings-screen
Settings

Workspace settings

Changes apply to everyone in Forma Studio

Shown on invoices and invitations.

caliper.app/

Old links redirect for 30 days.

When to use #

Use it for

  • Forms people edit occasionally and must get right.
  • Changes affect everyone in a workspace.

Skip it when

  • Toggles that should apply at once; use switches that save immediately.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/settings-screen

Adds its 9 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 { SettingsScreen } from "@/components/ui/settings-screen"

The worked example comes with Pro

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

Checking your licence…

API reference #

SettingsScreen

component
PropTypeDefault
titlestring"Settings"
descriptionstring—
sections *readonly { id: string; label: string; }[]—
fields *readonly SettingsField[]—
onSave *(values: Record<string, string>) => void | Promise<void>—
danger{ title: string; consequence: string; label: string; onConfirm: () => void; }—
classNamestring—

Accessibility #

It exposes status, img and region semantics, with aria-label, aria-current, aria-live and aria-describedby kept 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.