Notifications With Actions Demo

Installation

Props

Prop	Type	Default	Description
`items`	`NotificationItem[]`	`defaultNotifications`	Array of notification items
`placement`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Popover placement position

NotificationItem Interface

interface NotificationItem {
  id: string;
  title: string;
  description: string;
  time: string;
}

Features

Interactive Actions: Click grip icon to reveal archive and delete actions
Smooth Animations: Uses Framer Motion for smooth slide animations
Archive & Delete: Built-in actions for managing notifications
Visual Feedback: Clear visual states for active/inactive notifications
Placement Control: Choose where the popover appears relative to trigger
State Management: Handles notification removal and state updates

Usage

import NotificationsWithActions from "@/components/ui/notifications-with-actions";
 
export default function Example() {
  const notifications = [
    {
      id: "1",
      title: "Welcome 🎉",
      description: "Thanks for checking out the notifications component!",
      time: "just now",
    },
    {
      id: "2",
      title: "System Update",
      description: "We've rolled out a new feature for you.",
      time: "1h ago",
    },
    {
      id: "3",
      title: "Reminder",
      description: "Don't forget to finish your profile setup.",
      time: "3h ago",
    },
  ];
 
  return (
    <div className="p-6">
      {/* Default placement */}
      <NotificationsWithActions />
 
      {/* Custom notifications and placement */}
      <NotificationsWithActions items={notifications} placement="top" />
    </div>
  );
}