Notification Bell

Pro

A bell that rings on new notifications, with a popping badge and an inbox popover.

LLarkspur/ Projects

Customize

Unread2

Ring on new

Align

Installation

Notification Bell is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy notification-bell.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { NotificationBell } from "@/components/ui/notification-bell";

<NotificationBell
  notifications={inbox}
  onMarkAllRead={() => markAllRead()}
  onSelect={(id) => router.push(`/inbox/${id}`)}
/>

Props

8 properties

Property	Type	Default	Description
notifications	{ id, title, time, read?, description? }[]	—	Notifications, newest first. A new unread one at the top rings the bell.
onMarkAllRead	() => void	—	Called by the Mark all as read button.
onOpenChange	(open: boolean) => void	—	Called when the popover opens or closes.
onSelect	(id: string) => void	—	Makes rows clickable and receives the chosen id.
open	boolean	—	Popover open state, for controlled use.
align	"start" \| "end"	"end"	Side of the bell the popover lines up with.
ring	boolean	true	Swing the bell when a new unread notification arrives.
className	string	—	Extra classes for the wrapper.

Dependencies: motion