Components
Loading preview...
This Notification Carousel component offers a fresh and unique take on handling user alerts. Instead of stacking notifications in a typical list, it displays them as individual cards inside a horizontal carousel that users can navigate with simple left and right controls. Each card includes a clear title, description, and timestamp, while a badge on the bell icon shows the total count of notifications. The popover is centered to the trigger for a clean, intuitive look, and the design works seamlessly in both dark and light themes.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/notifications-carouselimport NotificationsCarousel from "@/components/ui/notifications-carousel";
export default function DemoOne() {
return <NotificationsCarousel />;
}