Pro

Bubble pack

Choices as bubbles sized by weight, packed together like froth. They pop in from the middle and settle; the one under the pointer or focus swells and nudges its neighbours; chosen bubbles take the accent. Drag one to fling it and the rest make room.

Pro

pnpm dlx shadcn@latest add @caliper/bubble-pack

What do you want to follow?

Pick three or more. Bigger topics have more writers.

2 selected

Installs components/ui/bubble-pack.tsxDepends on none beyond ReactMotion honours reduced motion

When to use

Use it for

Picking interests, topics or skills during onboarding.
Tags where weight matters, such as followers or usage.

Skip it when

More than about 20 choices; use a searchable multi-select.
Choices people need to compare by label in order.

Decisions

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

Behaviour

Real toggle buttons: Every bubble is a button with a pressed state, in source order for Tab; a drag never counts as a press.
Stable under re-render: The pack is rebuilt only when the items change, so selecting one does not reshuffle the rest.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/bubble-pack

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.

example.tsx

import { BubblePack } from "@/components/ui/bubble-pack"

The worked example comes with Pro

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

BubblePack

component

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

PropTypeDefaultDescription

items *readonly BubbleItem[]—

label *string—Names the group, e.g. "Topics you follow".

selectedreadonly string[]—

defaultSelectedreadonly string[][]

onSelectedChange((selected: string[]) => void)—

It exposes group semantics, with aria-label and aria-pressed 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.