5Sponsor

Notification Center

Persistent queue-based notification panel with useNotifications hook

Terminal

Installation

pnpm dlx shadcn@latest add @termcn/notification-center

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