Components
Loading preview...
This Notifications with Actions component, a standard notification popover by adding interactive controls for each notification. A GripVertical icon on the right allows users to reveal contextual actions — specifically Archive and Delete buttons — which animate into view by slightly shifting the text content to the left. To enhance usability, a dedicated ChevronLeft icon appears alongside these actions, letting users easily close the action menu and return the notification item to its normal state. The component is fully reusable, supports popover placement customization, and uses Framer Motion for smooth transitions.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/notifications-with-actionsimport NotificationsWithActions from "@/components/ui/notifications-with-actions";
export default function DemoOne() {
return <NotificationsWithActions />;
}