Blocks
Notification Center Block
A notification panel combining Card, Avatar, Badge, Toggle, and Separator with dismiss and mute functionality.
Notifications
2AC
Alice mentioned you
mentionCan you review the rough tabs refactor before lunch?
Just now
DP
Production deploy finished
deployVersion 0.4.2 reached production without rollout errors.
18 min ago
CD
New comment on stat-card
commentThe trend icon alignment is still off at smaller widths.
1 hr ago
!
Build warning detected
alertA type mismatch appeared in the chart package after the last merge.
3 hr ago
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/notification-center.jsonProps
PropTypeDefaultDescription
markAllReadLabelstring—
Action label for marking notifications as read.
muteLabelstring—
Label for the mute toggle.
notificationsNotification[]—
Notifications rendered by the block.
onDismiss(id: Notification["id"]) => void—
Callback fired when a notification is dismissed.
onMarkAllRead() => void—
Callback fired when all notifications are marked read.
onMuteChange(muted: boolean) => void—
Callback fired when the mute state changes.
titlestring—
Block heading text.
Accessibility
This block is composed from accessible byDefaultHuman components. Preserve visible labels, button text, and supporting copy when adapting it so the layout remains understandable without the visual styling.
Examples
import { NotificationCenterBlock } from "@/components/block/NotificationCenterBlock";
<NotificationCenterBlock />;