Pro

Honeycomb grid

An app grid in the style of a watch: round items packed in a honeycomb that shrink and gather toward the edges, so the middle is always the largest. Drag to move around with a fling; the item nearest the middle is named underneath, and the focused item glides to the centre.

Pro

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

Apps

Drag around, press one to bring it to the middle, press again to open.

Nothing open

Installs components/ui/honeycomb-grid.tsxDepends on none beyond ReactMotion honours reduced motion

When to use

Use it for

A launcher or quick-switch for many destinations on a small or square surface.
Showcases where the arrangement itself is the delight: integrations, apps, team avatars.

Skip it when

Lists people scan by name; a grid with labels is faster.
Fewer than about seven items, where there is no edge to shrink toward.

Decisions

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

Behaviour

The lens: Size falls with the square of distance from the middle and positions are pulled inward by a soft curve, so the edge is crowded and small but never cut off.
Tap to centre, tap to open: A pointer press on an off-centre item brings it to the middle first; Enter opens whatever is focused.
A list of buttons: Every item is a named button in ring order; arrows step to hex neighbours (Shift for the other diagonal) and focus glides it to the centre.

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/honeycomb-grid

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 HoneycombGrid and honeycombCells.

example.tsx

import { HoneycombGrid, honeycombCells } from "@/components/ui/honeycomb-grid"

The worked example comes with Pro

The 51-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

HoneycombGrid

component

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

PropTypeDefaultDescription

items *HoneycombItem[]—

onOpen((item: HoneycombItem) => void)—

sizenumber64Diameter of an item at the centre, in px.

labelstring"Apps"Names the grid for assistive technology.

honeycombCells

component

No props of its own; it accepts the native props of its root element.

It exposes list and listitem semantics, with aria-label and aria-hidden kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

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