Notifications inbox
A bell with a rolling unread badge that opens a notifications popover; items stagger in, mark-all sweeps the unread dots top to bottom, and new items slide in with layout reflow.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { NotificationsInbox } from '@/components/component-kit/items/block-notifications-inbox';
export function Example() { return <NotificationsInbox />;}Props
| Prop | Type | Default | Description |
|---|---|---|---|
notifications | Notification[] | 6 demo items | Seed list; the block keeps its own read/dismiss state after mount. |
variant | "popover" | "panel" | "popover" | Bell trigger with a portalled popover, or the list rendered inline as a static panel. |
defaultOpen | boolean | false | Open the popover on mount. |
autoPlay | boolean | false | Loop an idle animation that marks an item read and re-inserts it every ~2s. |
contentClassName | string | undefined | Class for the portalled popover. |