Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Snap guides

A small canvas of cards you arrange by dragging, with a design tool's alignment help: cards snap to each other's edges and centres and to the canvas centre, guide lines show what they line up with, and the gaps to their neighbours are measured as they move.

Pro
pnpm dlx shadcn@latest add @caliper/snap-guides

Report layout

Drag a card near another; it snaps and shows the guides.

Installs components/ui/snap-guides.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

  • Dashboard, page and report builders where people place blocks.
  • Whiteboards and layout editors.

Skip it when

  • Ordered lists; use `SortableList`.
  • Grids with fixed cells; use `DashboardBuilder`.

Decisions

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

Behaviour

The smallest nudge
Each axis snaps to the nearest edge or centre within six pixels, so cards line up without fighting the pointer; hold Alt to move freely.

Styling

Design-tool pink
Guides and measurements use the pink people know from design tools, a colour nothing else on the canvas uses.

Usage

Pixel steps
Arrow keys move the focused card a pixel at a time (Shift for ten) and show the guides it lines up with.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/snap-guides

Adds its 2 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 SnapGuides and snapBox.

example.tsx
import { SnapGuides, snapBox } from "@/components/ui/snap-guides"

The worked example comes with Pro

The 31-line example behind the preview opens here, ready to copy.

  • 602 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

SnapGuides

component

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

PropTypeDefaultDescription
label *string—Names the canvas, e.g. "Layout".
items *SnapItem[]—
onChange((items: SnapItem[]) => void)—
widthnumber560The canvas size in its own pixels; it scales down to fit a narrower space.
heightnumber340
thresholdnumber6How close, in pixels, an edge must come before it snaps.

snapBox

component
PropTypeDefault
id *string—
label *string—
x *number—
y *number—
w *number—
h *number—
contentReactNode—

Accessibility

It exposes group semantics, with aria-label, aria-roledescription and aria-hidden kept in step with state.

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.

All Surfaces examples