SLARIVO / NOTIFICATIONS

Notifications Components

Browse 261 exact locally owned demos. Filter the collection, inspect a focused preview, and unlock its implementation prompt.

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Displays a callout for user attention.

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Toast Notification

  An animated system-style toast that springs in, holds, then slides out, with success, error, info, and warning variants.

• Slarivo Mono Alerts

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Team Invitation

  Team Invitation notification

• Slarivo Notice Alert

  A restrained alert wrapper with info, success, warning, primary, and destructive tones for inline notices and status messages.

• Slarivo Update Available Banner

  An update notification banner with an icon, message, and Later and Update now action buttons that can be dismissed and reopened.

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Sonner

  An opinionated toast component for React.

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Banner

  A versatile notification banner component with gradient background and grid pattern overlay. Originally designed for Dub.co's domain claim notifications. Features - Dismissible banner with close button - Optional icon with circular background - Customizable action button - "Learn more" link support - Responsive layout (mobile/desktop) - Built-in grid pattern background

• Slarivo Toast

  A succinct message that is displayed temporarily.

• Slarivo Toast

  A succinct message that is displayed temporarily.

• Slarivo Toast

  A succinct message that is displayed temporarily.

• Slarivo Toast

  A succinct message that is displayed temporarily.

• Slarivo Stacked alerts

  Stacked alerts

• Slarivo Save Changes Toast

  Clerk.dev save changes toast

• Slarivo Sonner

  An opinionated toast component for React.

• Slarivo Information Card

  Information cards can serve as callout cards, banners, toast notifications, or announcement boxes to deliver news, updates, and alerts to your users.

• Slarivo Information Card

  Information cards can serve as callout cards, banners, toast notifications, or announcement boxes to deliver news, updates, and alerts to your users.

• Slarivo Button

  Advanced button component with extended options and variants.

• Slarivo Empty Notifications State

  An inbox-zero empty state for a notifications list, with an icon, title, description, and a call-to-action button.

• Slarivo Notification Popover

  Notification popover component with framer motion and tailwind css.

• Slarivo Alert Toast

  Alert Toast A responsive and theme-aware alert component designed to provide contextual feedback for different user actions. It includes variants for success, warning, info, and error states, with support for both filled and subtle visual styles.

• Slarivo Activity Dropdown

  Activity Dropdown: Features a staggered reveal animation where each notification item fades in sequentially, a rotating chevron indicator, and full light/dark theme support.

• Slarivo Base Button

  Here is Button component

• Slarivo Camera Permission Request Card

  A beautifully designed card component for requesting camera permissions. Ideal for onboarding flows and video call apps.

• Slarivo Item

  Here is Item component

• Slarivo Dynamic Island

  A reusable Dynamic Island component inspired by Apple's design, featuring smooth state transitions and animations.

• Slarivo Splashed Push Notifications

  Simple, splashed push notifications created from templates I found on CodePen. For credit info, please visit https://github.com/Northstrix/Splashed-Push-Notifications This demo utilizes the icons from https://lucide.dev/ and throws toasts with the quotes from "Losing Alice"

• Slarivo Notification Center

  Here is Notification Center component

• Slarivo Card

  Notification Card A responsive and animated notification card component that displays user information, a message, and status details. It is designed to be easily integrated and customized via props.

• Slarivo Notification Button

  The Notification Button is a shadcn/ui-based component designed to display real-time alerts or counts for messages, tasks, or cart items. It combines a button with an icon (defaulting to a bell) and a dynamic badge that shows the count, making it highly visible and actionable. The component supports multiple sizes (sm, md, lg) and ensures that the badge scales proportionally with the icon and button, maintaining a clean, modern, and responsive design. Its flexibility allows developers to replace the icon or integrate it into dashboards, navbars, or overlays, making it a practical solution for interactive UIs that require user attention to notifications.

• Slarivo Unsaved changes

  A floating action bar component that notifies users of unsaved changes and provides save/reset actions.

• Slarivo Dynamic Island

  Here is Dynamic Island component

• Slarivo Badge Button Combo

  The Badge + Button Combo is a shadcn/ui component that combines a standard button with a floating badge to display status or counts, such as “New,” “Beta,” or numeric notifications. The badge is positioned top-right of the button and scales appropriately with the button size, which can be configured as sm, md, or lg. This design provides a clear visual indicator for alerts, updates, or special statuses while keeping the button functional and interactive. Its flexibility makes it ideal for dashboards, messaging interfaces, or feature highlight buttons, adding both usability and visual appeal to any interface.

• Slarivo Stack Ripple

  Stacked notification cards that ripple open with spring animations to reveal messages, signups, and billing reminders.

• Slarivo Alert

  A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.

• Slarivo Card

  Incoming Call Notification This component displays an incoming call notification card. It's designed to be highly reusable, with props for caller information and action handlers. It uses framer-motion for smooth enter/exit animations and a subtle pulsing effect to draw attention.

• Slarivo Badge Tabs

  The Badge Tabs component is a dynamic, interactive tab system that displays badges alongside each tab label, making it ideal for real-time dashboards, notifications, or admin panels. Each tab can show a number or alert, and badges can animate as they change, providing a clear visual cue of updates. Selecting a tab highlights it distinctly, while inactive tabs remain subdued, ensuring users always know which tab is active. The component supports rich content for each tab, allowing for detailed displays such as messages, tasks, or alerts, all within a compact and visually engaging interface.

• Slarivo Feedback Toast

  The FeedbackToast is a animated UI component designed to collect quick feedback from users in a non-intrusive way. It presents a thumbs-up/down prompt with an optional comment input when negative feedback is given. This component supports delayed auto-close behavior, smooth animations via framer-motion, and flexible feedback handling through a callback function.

• Slarivo Banner

  A dismissible banner for site-wide announcements and status messages, with stacking, priority queueing, and default/info/success/warning/destructive variants.

• Slarivo Animated List

  A sophisticated animation component that creates dynamic column-based transitions with scaling effects. Perfect for showcasing notifications, messages, or any sequential content with smooth formation, scrolling, and reset animations.

• Slarivo Avatar Notifications

  This Avatar Notifications with Blinking Indicator component is a refined and modern way to handle user alerts. Instead of relying on plain badges, it introduces a subtle status dot at the top-right corner of the notification icon. When there are new messages, the dot blinks green to draw attention, and when there are none, it switches to a calm static gray state. The popover is neatly centered below the icon, keeping the interaction natural and balanced. Each notification is presented with an avatar, sender name, message, and timestamp, making it easy to recognize at a glance.

• Slarivo Admonition

  Here is Admonition component

• Slarivo Notifications

  The Notifications component is a reusable, interactive UI element built using ShadCN UI, TypeScript, and Tailwind CSS, designed to display real-time notifications in a web application. It features a bell icon trigger with an optional unread badge, and a dropdown menu that appears centered below the icon, ensuring a consistent and visually appealing alignment.

• Slarivo Card

  Waitlist Notification Card A responsive and theme-adaptive card component perfect for displaying status messages, such as waitlist confirmations, success notifications, or informational alerts.

• Slarivo Project Banner

  Used for temporary, project-wide notifications that require resolution

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Highlighter

  Highlighter, Particle, CTA

• Slarivo Toast

  The Toaster component is a customizable toast notification system built on top of the Sonner library. It provides a flexible, animated UI for in-app alerts, designed to match modern UX and design standards.

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Sidebar News

  A stackable news card component that displays updates in an interactive card format. Built for Dub.co's notification system. Features - Stacked card layout with hover animations - Swipe-to-dismiss functionality - Touch-friendly mobile interactions - Completion animation state - Progressive card reveal on hover

• Slarivo Animated List

  A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.

• Slarivo Calendar

  Book a call

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Alert

  Displays a callout for user attention, such as a success message, warning, or error.

• Slarivo Alert Dialog

  A modal dialog that interrupts the user with important content and expects a response.

• Slarivo Toast

  A succinct message that is displayed temporarily.

• Slarivo Toast

  A succinct message that is displayed temporarily.

• Slarivo Banner

  he Banner component is a flexible notification element for showing messages, alerts, or announcements. It supports multiple variants (success, warning, info, premium, etc.), different sizes, optional icons, action buttons, and a closable option. It also includes an autoHide feature to dismiss the banner automatically after a set time and an optional shimmer shade effect for extra visual emphasis.

• Slarivo Combined Featured Section

  The combined section component serves as a spotlight area to showcase the core strengths or highlights of our platform. It brings together key offerings

• Slarivo Live Feed

  Live Feed Component

• Slarivo NotificationIn box Popover

  This Notification Inbox Popover provides a clean, inbox-style experience for managing alerts directly within the app. Users can toggle between All and Unread notifications using tabs, while each notification is displayed with a relevant Lucide icon, bold styling for unread items, and a timestamp for context. A small dot indicator reinforces which items are new. The design now also includes a “Mark all as read” option in the header, allowing users to quickly clear unread items in one click. Combined with the footer’s “View all notifications” action, this layout balances clarity and efficiency, making it well-suited for SaaS dashboards, admin panels, or productivity apps where streamlined notification handling is essential.

• Slarivo Notifications Menu

  A sleek, ultra-minimal notifications menu focused on clarity and function, just the essentials, no clutter.

• Slarivo Basic Toast

  Here is Toast component

• Slarivo Alert

  Displays a callout for user attention.

• Slarivo Empty Background

  An empty state placeholder with a muted background surface, icon, title, description and refresh action for pages or panels with no content.

• Slarivo Information Card

  Information cards can serve as callout cards, banners, toast notifications, or announcement boxes to deliver news, updates, and alerts to your users.

• Slarivo Toast

  Here is Toast component

• Slarivo Cursor Cards

  Here is Cursor Cards component

• Slarivo Notifications Filter

  This Notifications with Category Filter component provides a clean and efficient way for users to organize and browse through their alerts. Instead of showing all notifications in a single stream, it introduces category filters such as All, Updates, Alerts, and Reminders, allowing users to quickly narrow down what matters most. The interface is minimal, using only Lucide icons and neutral theme styles, ensuring it fits seamlessly in both light and dark modes.

• Slarivo Dashboard Activities

  Dashboard Activities Admin Dashboard Activities Recent activity

• Slarivo Notification Alert Dialog

  Here is Notification Alert Dialog component

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo With Icon

  Here is notifications component

• Slarivo Dynamic Island

  Apple-inspired Dynamic Island component with smooth spring animations. Expandable notification pill for alerts, music players, timers, incoming calls, and status updates. Respects prefers-reduced-motion.

• Slarivo Grouped Notification Toggles

  A notification settings card that groups toggle switches by category like security, social, and billing.

• Slarivo Notification Channel Matrix

  A settings card with a switch matrix table for toggling each notification type across email, push, and SMS channels.

• Slarivo The Item one

  Here is The Item components

• Slarivo Live Activity

  An iOS-style live activity pod that shows a single ongoing task with running, success and error states, morphing between a compact glyph and an expanded card with progress and a retry action.

• Slarivo Achievement Unlocked

  Notifications component from the 21st.dev community.

• Slarivo Sonner Custom Toast

  A button that triggers a custom Sonner toast notification showing an avatar, message preview, and a reply action.

• Slarivo BeUI Dynamic Island

  Notifications component from the 21st.dev community.

• Slarivo Notifications Toggle

  This Lucide-based Notifications component is a clean, professional solution for handling user alerts with both dark and light theme support. It offers two distinct views inside a popover: a carousel mode, where users can browse notifications one at a time with smooth navigation controls, and a vertical list mode, which displays multiple notifications in a scrollable stack. Each notification includes a Lucide icon, title, description, and timestamp, providing clear context without relying on colors or emojis.

• Slarivo Alert

  Gradient Alert A theme-aware, animated alert component that displays contextual messages for different states like information, success, warning, and error.

• Slarivo Alert

  An alert component made with framer motion and tailwind css.

• Slarivo Notifications

  This Notifications component is a reusable UI element built with shadcn/ui and TypeScript (TSX) that displays a bell icon with a notification count badge. When the user clicks the bell, a popover card opens directly beneath the icon, aligned to its center, containing a scrollable list of notifications. Each notification shows a title, description, and timestamp in a clean, structured layout.

• Slarivo Card

  Alert Card A visually engaging, animated alert card to deliver

• Slarivo Alert Badge

  Alert Badge inspired by Tremor

• Slarivo RuixenPopover_02

  This custom ShadCN popover displays notifications in a scrollable layout with clear visual boundaries and dark/light mode compatibility. Each notification supports a title, message, timestamp, and optional CTA, like a link to Ruixen. The built-in navigation with Back and Next buttons allows users to browse through multiple notifications seamlessly.

• Slarivo Animated List

  Here is animated list component

• Slarivo Toast

  Here is Toast component

• Slarivo Alert Banner

  Alert Banner A dismissible alert component with variants, actions, and animations, designed to provide feedback to the user.

• Slarivo NotificationsWithActions

  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.

• Slarivo Alert

  A versatile alert component for displaying important messages, notifications, and status updates.

• Slarivo Alert

  A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.

• Slarivo Alert

  A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.

• Slarivo Alert

  A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.

• Slarivo Popover

  Here is Popover component

• Slarivo Vercel Notification Popover

  A Vercel-style notification center that adapts to the device. Renders as a popover on desktop and a bottom sheet on mobile, with animated tabs and hover actions.

• Slarivo Project Banner

  Used for temporary, project-wide notifications that require resolution

• Slarivo Notifications Carousel

  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.

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Badge

  Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.

• Slarivo Scheduler

  Here is notification scheduler component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Alert Badge

  The AlertBadge component is a modern, interactive notification badge designed for developers and dashboards. Unlike traditional toasts, it displays a live counter with alert messages in a compact, floating style. It supports multiple types such as success, error, info, and warning, each with corresponding colors and icons. The component is fully reusable and configurable through props, allowing developers to set default counts, labels, and auto-dismiss durations. Users can increment, decrement, or clear the count dynamically, making it perfect for live notifications, message counters, or real-time alerts in web applications. Its clean design and flexible behavior provide both usability and aesthetic appeal, making it a powerful utility for modern interfaces.

• Slarivo NotificationsAlt

  This Notifications component is designed to provide users with a richer, more informative experience. Unlike a standard notification list, it allows embedding interactive elements such as links and info icons within individual notifications. The info icons are paired with tooltips (powered by shadcn UI) that appear on hover, offering additional context without cluttering the message itself. The component uses a popover aligned to the center of the bell icon, ensuring a clean, intuitive placement.

• Slarivo Push Approval Card

  A push-notification approval card that prompts the user to confirm a sign-in request from their trusted device while waiting for approval.

• Slarivo Sonner Custom Color Toast

  A button that triggers a Sonner promise toast with custom loading, success, and error states and a custom accent color.

• Slarivo HeroUI Alert

  HeroUI v3 Alert — status-aware feedback messages built with the real @heroui/react package. Includes default, accent, success, warning and danger statuses, action buttons, close buttons, custom indicators, compact alerts, stacked notifications, maintenance notices and custom BEM/Tailwind styling. Works in light and dark themes.

• Slarivo HeroUI Alert

  HeroUI v3 Alert — status-aware feedback messages built with the real @heroui/react package. Includes default, accent, success, warning and danger statuses, action buttons, close buttons, custom indicators, compact alerts, stacked notifications, maintenance notices and custom BEM/Tailwind styling. Works in light and dark themes.

• Slarivo HeroUI Alert

  HeroUI v3 Alert — status-aware feedback messages built with the real @heroui/react package. Includes default, accent, success, warning and danger statuses, action buttons, close buttons, custom indicators, compact alerts, stacked notifications, maintenance notices and custom BEM/Tailwind styling. Works in light and dark themes.

• Slarivo HeroUI Alert

  HeroUI v3 Alert — status-aware feedback messages built with the real @heroui/react package. Includes default, accent, success, warning and danger statuses, action buttons, close buttons, custom indicators, compact alerts, stacked notifications, maintenance notices and custom BEM/Tailwind styling. Works in light and dark themes.

• Slarivo HeroUI Alert

  HeroUI v3 Alert — status-aware feedback messages built with the real @heroui/react package. Includes default, accent, success, warning and danger statuses, action buttons, close buttons, custom indicators, compact alerts, stacked notifications, maintenance notices and custom BEM/Tailwind styling. Works in light and dark themes.

• Slarivo HeroUI Alert

  HeroUI v3 Alert — status-aware feedback messages built with the real @heroui/react package. Includes default, accent, success, warning and danger statuses, action buttons, close buttons, custom indicators, compact alerts, stacked notifications, maintenance notices and custom BEM/Tailwind styling. Works in light and dark themes.

• Slarivo HeroUI Alert

  HeroUI v3 Alert — status-aware feedback messages built with the real @heroui/react package. Includes default, accent, success, warning and danger statuses, action buttons, close buttons, custom indicators, compact alerts, stacked notifications, maintenance notices and custom BEM/Tailwind styling. Works in light and dark themes.

• Slarivo HeroUI Alert

  HeroUI v3 Alert — status-aware feedback messages built with the real @heroui/react package. Includes default, accent, success, warning and danger statuses, action buttons, close buttons, custom indicators, compact alerts, stacked notifications, maintenance notices and custom BEM/Tailwind styling. Works in light and dark themes.

• Slarivo Digest Frequency

  A notification settings card that lets users choose an email digest frequency per category using dropdown selects.

• Slarivo Alert Stack

  Collapsed notification deck that fans open on hover — each dismiss re-settles the pile, and a quiet restore control appears once every alert is cleared. Light and dark via theme tokens.

• Slarivo BellNotify

  Custom bell notify me button with light/illuminated animation for better UX

• Slarivo Sonner Toast

  A button that triggers a Sonner toast notification with a description and an undo action.

• Slarivo New Items Pill

  A floating pill that appears when new items arrive in a scrollable feed and jumps you back to the newest items on click, with an accompanying scroll hook.

• Slarivo Card

  Here is indeveui card base component

• Slarivo Alert

  Here is Alert component

• Slarivo Avatar Square

  Here is Avatar Square component

• Slarivo Astryx Banner

  Banner communicates system-wide announcements, statuses, and alerts, from Meta's Astryx design system. Supports info, success, warning, and error statuses, dismissable and collapsible content, action buttons via endContent, and a section container variant for in-page placement.

• Slarivo Sync Status Toast

  A custom Sonner toast notification that displays repository sync status with branch info and action buttons.

• Slarivo Notification Scroll Area

  A scrollable container that displays a long list of notifications grouped by date with sticky date headers.

• Slarivo Toast with Action Button

  A button that triggers a Sonner toast notification containing an inline action button to follow up on the completed task.

• Slarivo Collapsible Banner

  A dismissible notice banner that folds its details away with a spring animation, with a controllable open/folded/dismissed state and an accessible expand/collapse toggle.

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Interactive Hover Button

  A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.

• Slarivo Animated AI Chat

  An AI chat interface with glass-morphism design and smart command features. Built with React and Framer Motion for smooth animations and professional interactions.

• Slarivo Animated Shiny Text

  A light glare effect which pans across text making it appear as if it is shimmering.

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Message loading

  Message Loading animation

• Slarivo Background Components

  Here is Background Components component

• Slarivo Dialog

  a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.

• Slarivo Message Dock

  This is an animated, expandable message dock component that allows users to select a character and send contextual messages through a sleek, reactive UI. It supports emoji-based avatars, online indicators, gradient themes, and smooth transitions using framer-motion, with auto-collapse, outside-click handling, and full customization options via props. Perfect for AI assistant selectors, chat applications, work dashboards, character chatbots, onboarding helpers, or interactive UI mascots in apps or games.

• Slarivo Hero Pill

  A stunning and interactive announcement banner featuring smooth animations and customizable content. Features: • Fluid entrance animations • Customizable content and styling options • Mobile-responsive design for optimal viewing on all devices • Support for icons and links • Accessible design with ARIA attributes • TypeScript support for enhanced development experience • Server-Side Rendering (SSR) compatibility Notes: • Powered by Framer Motion for seamless animations • Fully typed using TypeScript for improved code quality and maintainability • Implemented as a Server Component with client-side hydration for optimal performance • Designed with a mobile-first approach to ensure responsiveness across devices • Customizable through props for easy integration and reusability • Optimized bundle size for efficient loading and performance • Reusable across various contexts and projects

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo AI Assistant Interface

  An AI chat interface, with input, file uploads, suggestions and an animated logo

• Slarivo Navbar

  This MinimalChatBox component is a lightweight, interactive chat interface built with React, Framer Motion, and Tailwind. It provides a clean toggleable chat box that smoothly animates in and out of view. The design is simple yet functional, featuring an input field for typing messages and quick-access icons for opening, closing, and sending. Its minimal styling makes it easy to embed into any application while maintaining a modern, distraction-free look.

• Slarivo Navigation Bar

  Here is Navigation Bar component

• Slarivo Badge

  A label that emphasizes an element that requires attention, or helps categorize with other similar elements.

• Slarivo Animated Modal

  A customizable, compound modal component with animated transitions

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Chat template

  This component provides a complete chat interface with a sidebar for navigation, a contact list, and a chat window for messaging.

• Slarivo Animated Card

  Here is Animated Card component

• Slarivo Alert Dialog

  Alert Dialog

• Slarivo Fallback Card

  Here is Fallback Card component

• Slarivo Empty

  An empty state component that displays messages when no content is available.

• Slarivo Form

  Here is Form component

• Slarivo Ai Assistant

  The AI Message Bar is an interactive chat interface with a modern design featuring a sleek gradient background. It allows users to communicate with an AI assistant through a message input field, displaying both user messages and AI responses in a conversational format. The component includes visual indicators when the AI is "typing," animations for message appearance, and the ability to clear chat history, all within a responsive design that adapts to different screen sizes.

• Slarivo News Cards

  This is a full-featured, interactive News Feed Component with expandable cards, animated transitions, bookmark toggling, and live content rendering. It supports a three-tier visual priority system via status bars, uses LayoutGroup and AnimatePresence for shared layout animations, and conditionally disables motion for accessibility. Each card opens into a full-screen modal with detailed content, image overlays, and contextual metadata. Perfect for AI news agents, editorial dashboards, political data platforms, or any high-fidelity news experience requiring real-time interactivity and immersive storytelling.

• Slarivo Feature Spotlight

  Feature Spotlight A responsive section component designed to highlight a key product feature. It juxtaposes a detailed text description, including a pre-header, main heading, and call-to-action, with a dynamic visual element. The component includes subtle, continuous animations on floating images to draw user attention and add a modern feel. It is fully theme-adaptive, using shadcn/ui variables for colors and styling.

• Slarivo Popover

  Here is Popover component

• Slarivo Buttons

  Here is Buttons Components

• Slarivo Floating Chat Widget

  Floating chat widget with AI agent selection dropdown and animations

• Slarivo Disclosure

  The Disclosure component allows users to toggle the visibility of content, either collapsed or expanded.

• Slarivo Security Card

  Here is Security Card component

• Slarivo dock

  Here is dock component

• Slarivo Joblisting

  sleek animation job lisiting model type component

• Slarivo Warning Graphic

  This component renders an animated SVG warning graphic with a triangle, exclamation mark, stripes, and path outlines, using framer-motion for a layered entrance sequence with configurable animation speed and color. It supports motion-reduction detection, progressive draw effects, and modular fade/scale transitions for accessibility and customization. Perfect for alert banners, system status messages, onboarding visuals, HUD, sci-fi or gaming themes, or any UI needing a bold, animated warning indicator.

• Slarivo Base Button

  Here is Button component

• Slarivo Accordion

  Neobrutalism-styled accordion component.

• Slarivo Checkbox

  Here is modern minimalistic checkbox component

• Slarivo Cookie Notice

  This CookieNotice component is a user-friendly notification banner built with Shadcn UI and Tailwind CSS, designed to comply with cookie consent requirements. Positioned at the bottom center of the screen, it appears as a dismissible card containing a cookie icon, title, descriptive text, and links to policy details and preference management. The notice gives users a clear choice to review cookie policies, adjust their preferences, or simply click Accept to dismiss it.

• Slarivo Interactive Hover Button

  A button with expanding dot animation, loading state with spinner, and success checkmark. Multi-state interactive component.

• Slarivo Chat Preview

  A dynamic chat preview component for showcasing real-time messages in channels. Supports gradient backgrounds, customizable messages, and responsive design.

• Slarivo Dashboard Card With Modal

  A versatile dashboard card component featuring a modal overlay for data management, designed to display user information alongside interactive elements like copy-to-clipboard functionality and update confirmations. This component excels at presenting structured data in a clean, accessible format while providing smooth blur-based transitions that enhance user experience without disrupting workflow. Ideal for administrative interfaces, policy management systems, or any application requiring organized data display with intuitive modal interactions.

• Slarivo Status Badge

  Here is Status Badge component

• Slarivo Referral Card

  Referral Card This component provides a visually appealing and interactive card for referral programs. It uses framer-motion for smooth animations and is built with reusability in mind, allowing you to easily customize its content through props.

• Slarivo Clipped Image

  Here is component of clipped image components

• Slarivo Alert Dialog Icon

  Here is Alert Dialog Icon component

• Slarivo Onboarding Dialog

  A multi-step onboarding dialog with carousel navigation, animated progress dots, and cross-fading content. Built with Embla Carousel and Motion.

• Slarivo MarkerPopup

  Marker popups for rich location cards with labels, media, ratings, hours, and actions.

• Slarivo Mission Success Dialog

  Mission Success Dialog Description: A responsive and animated dialog component to celebrate a user's achievement or prompt for a next step. It's designed with reusability and shadcn/ui principles in mind, featuring smooth entrance and exit animations.

• Slarivo Chat Bubble

  Voice Chat Bubble A responsive, theme-adaptive component that displays a collapsed list of user avatars for a voice chat. Clicking it opens an animated modal with the full participant list and a call-to-action button.

• Slarivo Visualizer Button

  This Visualizer Button is a compact, interactive UI component built strictly with shadcn UI. It acts as a small audio visualizer embedded within a button, making it perfect for notifications, background music, or voice notes. When clicked, it plays the given audio source and animates five vertical bars to simulate audio levels in real time. The bars’ heights dynamically change to reflect the audio playback, providing instant visual feedback. The button is fully customizable with props for width, height, and class names, and it automatically adapts to light or dark themes using appropriate colors. Its minimal, functional design ensures it can seamlessly fit into any modern interface while adding a playful, engaging element to the user experience.

• Slarivo Folder Interaction

  An animated folder with interactive open/close mechanics.

• Slarivo Folder Components

  A folder icon component with a frosted glass front flap, stacked document peek, and smooth spring hover animation that fans the papers open. Pick from 6 color themes via the prop. Drop it into any React or Next.js project and install directly via the shadcn CLI.

• Slarivo Newsletter Dialog

  Newsletter Dialog A promotional dialog component designed to capture user sign-ups for a newsletter. It features a prominent image, customizable text sections, an email input field, and a call-to-action button, all wrapped in an animated, accessible modal.

• Slarivo indevuiToaster

  Here is toaster component by indevui

• Slarivo Sonner Promise Toast

  A button that triggers a promise-based Sonner toast, showing loading, success, and error states for async actions like syncing data.

• Slarivo Order Confirmation Toast

  A toast notification button that confirms a placed order with a description and a "View Order" action, built on Sonner.

• Slarivo Sonner Success Toast

  A button that triggers a success toast notification with a title and description using Sonner.

• Slarivo Payment Error Toast

  A button that triggers a Sonner error toast with a title and description to notify users about a failed payment.

• Slarivo Activity Dropdown

  An animated activity dropdown menu with smooth transitions and icon indicators.

• Slarivo Reshaped Alert

  Prominent message related to the entire page or a specific area. Renders a title, an optional icon and a children slot; supports an actions slot, four status colors (critical, warning, positive, primary), inline layout direction and bleed.

• Slarivo Maintenance Banner

  An amber system notice banner with a pulsing status dot for announcing scheduled maintenance windows.

• Slarivo Alert

  Alerts component from the 21st.dev community.

• Slarivo Reshaped Toast

  Notification system driven by the useToast hook (show/hide) and ToastProvider for scoped render regions. Toasts support an icon, title, text and 1-2 actions, five colors (inverted default plus neutral/primary/positive/critical), configurable position, timeout and width, vertical action layout, a custom startSlot and fully custom children layouts for banners.

• Slarivo Notification List

  An animated notification list where stacked cards fan out and expand on hover, revealing each notification's details.

• Slarivo Warning Alert

  A warning alert callout with a triangle icon, title and description for surfacing cautionary messages.

• Slarivo Alert with Icon and Actions

  An alert notification with a leading icon, title, description, and dismiss/confirm action buttons for security or update prompts.

• Slarivo Disclosure

  The Disclosure component allows users to toggle the visibility of content, either collapsed or expanded.

• Slarivo Voice Message Bubble

  The Voice Message Bubble component is a sleek, chat-style audio player designed for messaging apps. It features a compact bubble layout with a play/pause button using lucide-react icons, a minimalist black-and-white waveform visualization, and a real-time progress overlay. Users can click on the waveform to seek through the audio, and the component accepts configurable props for bubble color, waveform color, audio source, and duration. Designed with Shadcn UI principles, it ensures a clean, modern, and theme-aware interface that integrates seamlessly into both light and dark layouts. This makes it ideal for voice notes, notifications, or short audio messages in any chat or social application.

• Slarivo Secure Message Gateway

  A compact, modern contact component with a clean interface and real-time sending feedback.

• Slarivo Reshaped Badge

  Renders its children as text content for communicating an object's status. Comes in multiple colors with faded and outline variants, three sizes, a rounded notification-bubble mode, start/end icons, onClick/href interactions, a dismiss button and a Badge.Container compound component for corner positioning.

• Slarivo Toast

  Stacked toast notification system with auto-dismiss timeouts, action buttons, status icons, and configurable positions built on Base UI.

• Slarivo FloatButton

  A FloatButton component for labeling status, metadata, categories, and compact counts, featuring floating action button, floating-action-button, badge, icon button.

• Slarivo Modal Drop

  A Modal Drop component for focused confirmations, forms, details, and temporary tasks, featuring modal, overlay, scale, notification.

• Slarivo The Dialog

  A The Dialog component for switching settings, modes, preferences, and binary states, featuring settings, toggle, notification, shadcn/ui.

• Slarivo Navbar

  A Navbar component for helping users move through pages, sections, and application areas, featuring navbar, dashboard, tabs, search.

• Slarivo Navbar

  A Navbar component for helping users move through pages, sections, and application areas, featuring navbar, search, theme toggle, theme-toggle.

• Slarivo Switch

  An accessible toggle switch built on Base UI's Switch primitive. Animated thumb with a springy press/scale interaction, two sizes (default and sm), controlled or uncontrolled usage via checked / defaultChecked, disabled state, and easy accent recoloring…

• Slarivo Reshaped Badge

  Renders its children as text content for communicating an object's status. Comes in multiple colors with faded and outline variants, three sizes, a rounded notification-bubble mode, start/end icons, onClick/href interactions, a dismiss button and a…

• Slarivo Reshaped Badge

  Renders its children as text content for communicating an object's status. Comes in multiple colors with faded and outline variants, three sizes, a rounded notification-bubble mode, start/end icons, onClick/href interactions, a dismiss button and a…

• Slarivo Reshaped Badge

  Renders its children as text content for communicating an object's status. Comes in multiple colors with faded and outline variants, three sizes, a rounded notification-bubble mode, start/end icons, onClick/href interactions, a dismiss button and a…

• Slarivo Reshaped Badge

  Renders its children as text content for communicating an object's status. Comes in multiple colors with faded and outline variants, three sizes, a rounded notification-bubble mode, start/end icons, onClick/href interactions, a dismiss button and a…

• Slarivo Avatar Square

  A Avatar Square component for representing people, teams, and account identity, featuring avatar, user avatar, user-avatar, badge.

• Slarivo Notification Center

  A Notification Center component for surfacing timely updates, activity, and actionable messages, featuring notification center, notification-center, animated transitions, hover feedback.

• Slarivo Notification Settings Card

  A settings card with horizontal field rows, each toggled by a switch, for managing notification preferences.

• Slarivo Use Toast

  A React hook for creating and managing toast notifications with a global queue, dismiss and update controls.

• Slarivo Team Invitation Alert

  A notification alert card showing a team invitation with an avatar, online status, and accept/decline actions.

• Slarivo Unsaved Changes Reminder Toast

  A toast that reminds users of unsaved edits with inline save and discard actions.

• Slarivo Promise Toast

  A button that triggers a promise-based toast notification, cycling through loading, success, and error states as an async task resolves.

• Slarivo Position Sonner

  A set of buttons that trigger sonner toast notifications in each of the six screen positions.

• Slarivo System Update Notification Alert Dialog

  An alert dialog that notifies users about an available system update, showing the release version badge and "Update Now" / "Remind Me Later" actions.

• Slarivo Collaborative Requests Dropdown

  An animated dropdown for reviewing collaboration requests with an avatar group trigger, per-user approve/reject actions, bulk approve/reject, and an all-caught-up empty state.

• Slarivo Rate Limit Alert Dialog

  An alert dialog that warns a user they hit an API rate limit, with a live MM:SS countdown to automatic retry and an upgrade call to action.

• Slarivo Status Dot

  A small inline status indicator dot with a rippling pulse animation, deployment-state presets, generic tones, sizes, and optional labels.

• Slarivo Notification Preferences Matrix

  A notification preferences table with event rows and email, push, and SMS channel columns of checkboxes plus a save button.

• Slarivo Card Style Checkbox

  A checkbox wrapped in a bordered card with a title and description, ideal for settings toggles and opt-in options that highlight when selected.

• Slarivo Sonner Toast

  A toast notification trigger button paired with a styled Sonner toaster for showing brief confirmation messages like "Draft synced".

• Slarivo Notification Panel

  Opens from the bell, closes on Escape, grouped by day and filtered by kind — and it draws the difference between what you have seen and what you have actually dealt with, which most notification UIs collapse and cannot uncollapse. More at layro.vercel.app.

• Slarivo Promo Banner

  A dismissible top-of-page announcement banner with a call-to-action link and a close button, used for promoting product updates on a landing page.

• Slarivo Dismissible Alert Stack

  A stack of dismissible inline notification alerts (success, info, warning, error) that resolves to an empty "all caught up" state once every alert is closed.

• Slarivo Notification Channel Selector

  A checkbox list for choosing which channels — email, SMS, in-app and Slack — should receive notifications.

• Slarivo Notification Checkbox Group

  A vertical checkbox group for notification preferences, with each option showing a bold label and a helper description on divided rows.