Loading...
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | NotificationItem[] | defaultNotifications | Array of notification items |
placement | "top" | "bottom" | "left" | "right" | "bottom" | Popover placement position |
NotificationItem Interface
interface NotificationItem {
id: string;
icon: React.ReactNode;
title: string;
description: string;
time: string;
}Features
- Dual View Modes: Toggle between carousel and vertical list views
- Icon Support: Each notification can have a custom icon
- View Toggle: Easy switching between carousel and list modes
- Navigation Controls: Previous/next buttons in carousel mode
- Header Controls: Clean header with toggle button
- Responsive Design: Adapts to different screen sizes
Usage
import NotificationsToggle from "@/components/ui/notification-toggle";
import { Info, AlertCircle, Calendar } from "lucide-react";
export default function Example() {
const notifications = [
{
id: "1",
icon: <Info className="h-4 w-4 text-blue-500" />,
title: "Welcome",
description: "Thanks for checking out notifications.",
time: "just now",
},
{
id: "2",
icon: <AlertCircle className="h-4 w-4 text-red-500" />,
title: "System Update",
description: "A new feature has been rolled out.",
time: "1h ago",
},
{
id: "3",
icon: <Calendar className="h-4 w-4 text-green-500" />,
title: "Reminder",
description: "Complete your profile setup.",
time: "3h ago",
},
];
return (
<div className="p-6">
{/* Default toggle notifications */}
<NotificationsToggle />
{/* Custom notifications */}
<NotificationsToggle items={notifications} placement="top" />
</div>
);
}