caliper uidocs
DemoSign inGet Pro

App frame

Pro

The shell every screen sits in: workspace, navigation with counts, the plan's seats and search; a bottom tab bar under 760px.

Installs components/ui/app-frame.tsxDepends on lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/app-frame
Today

Today

Choose a place in the sidebar, or in the tab bar under 760px.

When to use #

Use it for

  • A product with five to nine top-level places.
  • You want screens to share one frame and one search.

Skip it when

  • Marketing pages; use the blocks.
  • Two or three places; a top bar with tabs is lighter.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/app-frame

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 AppFrame, ScreenHeader and ScreenPanel.

example.tsx
import { AppFrame, ScreenHeader, ScreenPanel } from "@/components/ui/app-frame"

The worked example comes with Pro

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

Checking your licence…

API reference #

AppFrame

component
PropTypeDefaultDescription
workspace *{ name: string; mark?: ReactNode; }—
workspaceMenuReactNode—A control in place of the workspace name, such as a workspace switcher.
nav *readonly AppNavItem[]—
location *string—The current place, e.g. "Billing", shown after the workspace.
plan{ name: string; used: number; limit: number; note?: string | undefined; }—
userReactNode—
searchLabelstring"Search or jump to…"
onSearch(() => void)—Opens your command palette. The ⌘K shortcut calls it too.
phoneTabsnumber4How many items the phone tab bar shows before More.
children *ReactNode—
classNamestring—

ScreenHeader

component
PropTypeDefault
title *ReactNode—
descriptionReactNode—
actionsReactNode—
classNamestring—

ScreenPanel

component

Also accepts the native props of its root element and a ref.

PropTypeDefault
titleReactNode—
asideReactNode—
children *ReactNode—
classNamestring—

Accessibility #

It exposes meter semantics, with aria-hidden, aria-label, aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext kept in step with state.

KeyBehaviour
EscapeCloses or cancels, then returns focus to where it came from.

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.