caliper uidocs
DemoSign inGet Pro

Settings layout

Pro

A settings page with side navigation, sections and a save bar.

Installs components/ui/settings-layout.tsxDepends on @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/settings-layout

Profile

Changes apply to your account only.

A digest of what changed in your workspace.

When to use #

Use it for

  • Many grouped preferences with unsaved changes.

Skip it when

  • A single toggle.

Installation #

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

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 SettingsLayout, SettingsSection and SettingsRow.

example.tsx
import { SettingsLayout, SettingsSection, SettingsRow } from "@/components/ui/settings-layout"

The worked example comes with Pro

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

Checking your licence…

API reference #

SettingsLayout

component
PropTypeDefaultDescription
items *readonly SettingsNavItem[]—
active *string—
onActiveChange *(id: string) => void—
dirtynumber0How many unsaved changes there are.
onSave(() => void)—
onDiscard(() => void)—
savingboolean—
children *ReactNode—
classNamestring—

SettingsSection

component
PropTypeDefault
title *string—
descriptionstring—
children *ReactNode—
classNamestring—

SettingsRow

component
PropTypeDefault
label *string—
descriptionReactNode—
htmlForstring—
children *ReactNode—
classNamestring—

Accessibility #

It exposes tablist, tab, tabpanel and region semantics, with aria-label, aria-orientation, aria-selected, aria-controls, aria-labelledby and aria-hidden kept in step with state.

KeyBehaviour
↓Moves to the next item or value.
→Moves to the next item or value.
↑Moves to the previous item or value.
←Moves to the previous item or value.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.