Pro
Bell dock
Toasts that tuck themselves into the bell. A new notice shows as a toast; when it times out or is dismissed it shrinks along the way to the bell, which rings and counts it as unread.
pnpm dlx shadcn@latest add @caliper/bell-dockWhen to use
Use it for
- Apps with a notification centre, where a missed toast should still be findable.
- Background events: exports finished, comments, mentions.
Skip it when
- Errors that need action; use an `Alert` or a dialog.
- Results of what the person just did; use a `Toast`.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Shows where it went
- A toast that leaves travels into the bell, so people learn where missed notices are kept.
- Holds while read
- Hovering or focusing a toast stops its clock; the next one waits its turn.
Usage
- Polite and countable
- Toasts are a polite status region and the bell's name includes the unread count.
Installation
pnpm dlx shadcn@latest add @caliper/bell-dock
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.
import { BellDock } from "@/components/ui/bell-dock"
The worked example comes with Pro
The 39-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
API reference
BellDock
component
Also accepts the native props of its root element and a ref.
Accessibility
It exposes status semantics, with aria-label, aria-hidden and aria-live kept in step with state. Changes that matter are announced through a live region.
Keyboard and focus handling comes from Radix popover: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.
Motion
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.
Related
- Notification bellThe bell that opens notifications: the unread count sits on it and rolls to its new value, the bell swings once when the count rises, and its name always says how many are unread.
- ToastA short, dismissible message that confirms an action, with an optional undo.
- Notification centerA list of notifications with read state and filters.