Notification centeradmin

Bell button with unread count and a popover list with unread/all tabs, mark all read, item actions, empty state and infinite loading.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/notification-center

의존 아이템button locale popover style tabs

Default

notification-center-demo.tsx

"use client";
import * as React from "react";import { NotificationCenter, type NotificationItem } from "@/components/ui/notification-center";
const initial: NotificationItem[] = [  { id: "n1", title: "Payment received", description: "Reservation R-1042", time: "2 min ago", read: false },  { id: "n2", title: "Check-in tomorrow", description: "Reservation R-1050", time: "1 h ago", read: false },  { id: "n3", title: "Report ready", time: "Yesterday", read: true },];
export default function NotificationCenterDemo() {  const [items, setItems] = React.useState(initial);  const withActions = items.map((item) => ({    ...item,    actions: [{ id: "dismiss", label: "Dismiss", onSelect: () => setItems((current) => current.filter((entry) => entry.id !== item.id)) }],  }));  return (    <NotificationCenter      items={withActions}      onMarkRead={(id) => setItems((current) => current.map((item) => (item.id === id ? { ...item, read: true } : item)))}      onMarkAllRead={() => setItems((current) => current.map((item) => ({ ...item, read: true })))}    />  );}