Notification Bell

ui-codarise/notifications

UnverifiedBlock

A self-contained notifications system: NotificationBell (popover trigger with unread badge + new-notification ping), NotificationCenter (grouped Today/Yesterday/Earlier list with mark-all-as-read), NotificationItem (type-aware icon, hover-to-read, action buttons), NotificationEmpty, and helpers. Framework-agnostic and data-driven — pass notifications + unreadCount + onMarkAsRead/onMarkAllAsRead via props (no router/react-query coupling). Wire the bell into the sidebar via SidebarFooter's notificationsNode slot, or use standalone. The compact `icon` variant matches the sidebar footer bell styli

Install it

npx shadcn@latest add https://raw.githubusercontent.com/codarise/ui/main/registry/blocks/notifications.json

This registry does not serve an item endpoint we could read, so we hold its metadata but not its source.

What it pulls in

npm packages

lucide-react

Other registry items

codarise/ui/badge
codarise/ui/button
codarise/ui/icon-wrapper
codarise/ui/popover
codarise/ui/skeleton

Files it writes

notifications/notification-bell.tsx
notifications/notification-center.tsx
notifications/notification-item.tsx
notifications/notification-empty.tsx
notifications/notification-utils.ts
notifications/types.ts

More from ui

All 16 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Bento Cardbento-card	ui	Blocks	Unverified	no deps
Chat Bubblechat-bubble	ui	Blocks	Unverified	no deps
Chat Markerchat-marker	ui	Blocks	Unverified	no deps
Chat Message Rowchat-message-row	ui	Blocks	Unverified	no deps
Domain / Tenant Switcherdomain-tenant-switcher	ui	Blocks	Unverified	1 dep · 6 files
Error Stateerror-state	ui	Blocks	Unverified	1 dep
Featured Cardfeatured-card	ui	Blocks	Unverified	no deps
Loading Stateloading-state	ui	Blocks	Unverified	no deps