Notifications
Prov1.0.0A notification bell and inbox where items can be approved or answered inline.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import * as React from "react";
import { Notifications, type Notice } from "@/components/ui/notchset/blocks/notifications";
export function Bell() {
const [notices, setNotices] = React.useState<Notice[]>([
{ id: "1", kind: "approval", title: "Planner wants to send an email", detail: "SEND_EMAIL · RUN 8F3A1", time: "2 MIN", group: "NOW", needsYou: true, unread: true, actions: [{ label: "APPROVE" }] },
]);
return (
<Notifications
notices={notices}
onAction={async () => "APPROVED · EMAIL SENT"}
onRead={(ids) => setNotices((list) => list.map((n) => (ids.includes(n.id) ? { ...n, unread: false } : n)))}
onDismiss={(id) => setNotices((list) => list.filter((n) => n.id !== id))}
/>
);
}Props
notices–{ id, kind, title, detail, time, group, needsYou?, mention?, unread?, avatar?, actions? }[]kind is approval, failure, budget, info or mention (it picks the tile); actions with reply open an inline input.
onAction–(notice, action, replyText?) => string | Promise<string>Return the result line; a promise shows WORKING until it settles (a rejection puts the actions back).
onRead / onDismiss–(ids) => void / (id) => voidMark read; drop a row once it has folded away.
paused / onPausedChange / pauseLabel / pausedLabel–boolean / stringThe footer's pause switch (shown when onPausedChange is set).
emptyTitle / emptyBody–string / ReactNodeWhat an empty filter says.
open / defaultOpen / onOpenChange–booleanThe panel.
Anatomy
- One block that sits in your app bar.
- Your data says what is unread and what needs you; the block runs the action flow.
- Async actions show their work.
Notificationsdata-slot="notifications"The bell and its panel.
Source
components/ui/notchset/blocks/notifications.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/notificationsNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- An app bar's bell where people approve, retry or reply without leaving the page
Use something else when
- A full inbox with search and history: a page fits better
- Passing confirmations: use a toast
Mistakes to avoid
- Remove a notice in onDismiss, not in onAction: the row needs to show its result first
- Set unread in your data and clear it in onRead: the count comes from your notices
Agents find it by
- notifications, notification center, inbox dropdown, bell menu, approvals, activity panel, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/notifications.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- Enter / Space
- Open, act, toggle pause
- ← →
- Filter (NEEDS YOU, MENTIONS, ALL)
- Enter / Esc (reply)
- Send / cancel (ignored while composing with an IME)
- Esc
- Close the panel
Accessibility
- The bell names its unread count and controls the panel (aria-expanded); the panel is a labelled dialog that takes focus on open and returns it on close
- Items are a list; WORKING and each result are announced; info items' DONE has a full name
- Esc or a press outside closes the panel; Esc in a reply cancels it
Motion
- Bell
- Swings 14° and back (380ms) when toggled; inverts while open
- Panel
- Opens with a clip from the top right (380ms), closes faster (240ms)
- Result
- Shows for 1.5s, then the row folds away (320ms) and the counts roll
Responsive
- The panel is 420px and never wider than the viewport minus 24px.
Performance
- Plain DOM; timers are per action and cleared on unmount.
Changelog
v1.0.0 · 2026-10-03
First release
Part of
Included with Pro
Pro is in early access.
