Pro

Jiggle grid

A home-screen grid you arrange the way a phone does. A long press (or Edit) sets every item jiggling; drag one and the others slide aside to make room, or tap its badge to remove it.

Pro

pnpm dlx shadcn@latest add @caliper/jiggle-grid

Home

Press and hold an app, or choose Edit. Then drag, or remove.

Installs components/ui/jiggle-grid.tsxDepends on @radix-ui/react-slot, lucide-reactMotion honours reduced motion

When to use

Use it for

Letting people arrange shortcuts, favourites, widgets or a launcher.
Touch-first screens where reordering should feel direct.

Skip it when

Long lists ordered by priority; use `SortableList`.
Grids people rarely rearrange; the edit mode is a commitment.

Decisions

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

Behaviour

Out of step: Every item wobbles with its own phase and alternate items at another tempo, so the grid shivers like a phone's instead of swaying as one.
Pick up, move, drop: In edit mode Space picks an item up, arrows move it (up and down by a row), Space drops and Escape puts it back; Delete removes. Each step is announced.
Reduced motion: Nothing wobbles; edit mode shows by its badges and a dashed outline.

Styling

Apps have hues: Give an item a tone (the Badge hues) and it becomes a coloured mark with a white glyph, the same fill as company marks in both themes; without one it stays plain.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/jiggle-grid

Adds its 6 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 { JiggleGrid } from "@/components/ui/jiggle-grid"

The worked example comes with Pro

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

576 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

JiggleGrid

component

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

PropTypeDefaultDescription

items *JiggleItem[]—

onItemsChange *(items: JiggleItem[]) => void—

onOpen((item: JiggleItem) => void)—Called when an item is opened outside edit mode.

editingboolean—Edit mode, if you control it; otherwise a long press or the Edit button turns it on.

onEditingChange((editing: boolean) => void)—

labelstring"Apps"Names the grid for assistive technology.

It exposes list and listitem semantics, with aria-label, aria-pressed and aria-live kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour

SpaceActivates the focused control.

EnterActivates the focused control.

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

DeleteRemoves the next character or the selected item.

BackspaceRemoves the previous character or item.

Motion

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.