Notification Popover
Interactive notification center with unread badges, mark-all-read action, and dismissible items.
ReactTailwind CSSFramer Motion
Dependenciesframer-motion, lucide-react
npm install framer-motion lucide-reactPreview
Source Code
notification-popover.tsxtsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
"use client";
import React, { useState } from "react";
import { Bell, Check, X } from "lucide-react";
export function NotificationPopover() {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="relative inline-block">
<button
onClick={() => setIsOpen(!isOpen)}
className="p-2.5 rounded-xl bg-zinc-100 dark:bg-zinc-800 cursor-pointer"
>
<Bell className="w-5 h-5" />
</button>
</div>
);
}Usage
usage.tsxtsx
1
<NotificationPopover />Types
types.tstsx
1
2
3
4
5
6
7
export interface Notification {
id: string;
title: string;
description: string;
time: string;
read: boolean;
}