Pro

Goo popover

A popover that pours out of its trigger. The trigger and the panel are two ink shapes under a goo filter, so as the panel grows away a liquid neck joins them and then lets go. The words are drawn crisp on top and fade in once the shape lands.

Pro

pnpm dlx shadcn@latest add @caliper/goo-popover

Q4 launch

Pages, databases and people for the November release.

14 pages · last edited by Mara Chen 4 minutes ago

Installs components/ui/goo-popover.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

One primary action that opens a short set of choices: New, Share, Add to.
A product moment where the menu itself is part of the character, used once per screen.

Skip it when

Long or searchable lists; use the dropdown menu or the command palette.
Several on one screen; the effect is loud when repeated.

Decisions

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

Behaviour

Open is slow, close is quick: Opening uses the settle ease on the showcase duration; closing uses a short in-out, so dismissing never feels like waiting.
Focus goes in and comes back: The first item takes focus on open; Escape, a click outside or choosing an item returns it to the trigger.

Styling

The filter never touches text: Only the two background shapes are filtered. The button label and the items sit above them, so they stay sharp at any zoom.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/goo-popover

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 { GooPopover } from "@/components/ui/goo-popover"

The worked example comes with Pro

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

GooPopover

component

PropTypeDefaultDescription

label *ReactNode—The trigger's text.

title *string—Names the panel for assistive technology.

children *ReactNode | ((close: () => void) => ReactNode)—The panel. A render function receives `close`, for items that should close it.

openboolean—

defaultOpenbooleanfalse

onOpenChange((open: boolean) => void)—

align"start" | "end""start"

classNamestring—

It exposes dialog semantics, with aria-hidden, aria-expanded, aria-controls and aria-label 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.