Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | NotificationItem[] | DEFAULT_ITEMS | Array of notification items |
onDismiss | (id: string) => void | undefined | Callback when a toast is swiped |
sound | boolean | true | Enable micro noise-burst on dismiss |
NotificationItem Interface
interface NotificationItem {
id: string;
title: string;
body: string;
time: string;
type?: "default" | "success" | "error";
}Features
- Spring Toast Stack: Newest floats on top, older compress below with diminishing scale and blur
- Drag-to-Dismiss: Swipe the top card right to dismiss with spring exit animation
- Rubber-Band Physics: Resistance when dragging left past the boundary
- Glass Morphism: Backdrop blur with light/dark theme support via CSS custom properties
- Audio Feedback: Soft noise-burst tick on each dismissal
- Controlled/Uncontrolled: Works with or without external state management
Usage
import { Notification } from "@/components/ruixen/notification";
export default function Example() {
return <Notification />;
}