A notification center that folds each source into a stack with the newest card on top and the rest peeking underneath. A click fans the stack open with a spring, cards carry inline actions that resolve in place, and groups offer one bulk action.
harbor-web #812 is ready
Preview built in 48s from fix/checkout-tax.
+2 more from DeploysQuarterly planning
Thu, Nov 12 · 10:00 to 11:30 · Room 4B
+1 more from Calendar
npx shadcn@latest add https://hyperblur.dev/r/app-notification-groups.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/app-notification-groups.tsx.
import { AppNotificationGroups } from "@/components/hyperblur/app-notification-groups"
<AppNotificationGroups onAction={(g, id, action) => console.log(g, id, action)} />| Prop | Type | Default | Description |
|---|---|---|---|
| groups | NotificationGroup[] | four sample groups | Groups with id, app, glyph (deploy, billing, mention, calendar, security), color, optional bulkAction and items. Each item has id, title, body, time and optional actions; the first action is the primary button. |
| defaultExpanded | string | null | null | Id of the group open at mount. Groups with a single item are always open. |
| title | string | "Notifications" | Heading of the panel. |
| accent | string | "#2f7bff" | Color of the counter and focus rings. |
| onAction | (groupId: string, itemId: string, action: string) => void | Called when an inline action is pressed. Known actions such as Promote, Accept and Reply show a resolved state, then the card leaves. | |
| onBulkAction | (groupId: string, action: string) => void | Called by the bulk action of an open group. | |
| onDismiss | (groupId: string, itemId: string | null) => void | Called when a card, a whole collapsed stack (itemId null) or everything (groupId "all") is cleared. |