1Sponsor

Notification Center

Persistent queue-based notification panel with useNotifications hook

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/notification-center.json

Usage

import { NotificationCenter } from "@/components/ui/notification-center";
import { useNotifications } from "@/hooks/use-notifications";
const { notify } = useNotifications();
 
notify({
  title: "Build complete",
  body: "All checks passed",
  variant: "success",
});
 
<NotificationCenter maxVisible={5} width={40} />;

API Reference

NotificationCenter

PropTypeDefault
maxVisiblenumber5
widthnumber40