SLARIVO / ANNOUNCEMENTS

Announcements Components

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

• Slarivo Announcement

  Announcement in Sidebar

• Slarivo Announcement

  A compound badge designed to display an announcement.

• 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 Project Banner

  Used for temporary, project-wide notifications that require resolution

• Slarivo Banner

  Place the element at the top of your root layout to display announcements. By default, the banner uses a style tag to modify Fumadocs layouts, such as reducing the sidebar height. You can disable this feature with: To enable users to close the banner, assign it an ID. The state will be automatically saved.

• 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 Team Invitation

  Team Invitation notification

• Slarivo Alert

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

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Banner

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

• Slarivo Testimonials Columns

  an animated testimonials section where the testimonials are shown in columns

• Slarivo Testimonials with Marquee

  A dynamic testimonials section with infinite scroll animation featuring a headline, description, and auto-scrolling testimonial cards that pause on hover, inspired by Launch UI. Features: • Infinite scroll animation with hover pause • Responsive, mobile-first design • Gradient fade edges for smooth transitions • Customizable content through props • Dark mode support • Optimized performance using CSS animations

• 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 Animated Testimonials

  Minimal testimonials sections with image and quote. Features: - Image Carousel: Enjoy smooth animated image transitions with cool 3D rotation effects. - Word Animation: Watch text pop up with a fun word-by-word animation. - Navigation Controls: Easily navigate with Previous/Next buttons that have hover animations. - Autoplay Support: Choose to have an automatic slideshow if you want. - Shadcn/ui Integration: Get built-in theme support for a consistent look. - Responsive Layout: It adjusts from a two-column layout on desktop to a single-column view on mobile. - Customizable Styles: Style it your way with easy customization through className props. Example Use Cases: - Customer Reviews: Show off customer feedback along with their photos. - Team Showcase: Highlight team members with their profiles. - Client Testimonials: Present client feedback in a visually appealing way. - Portfolio Reviews: Feature project feedback from clients.

• Slarivo Animated Shiny Text

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

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Text Reveal

  Fade in text as you scroll down the page.

• Slarivo Circular Testimonials

  An animated testimonial section that displays user feedback in a visually engaging way. For the disclaimer, credit information, and the Vanilla HTML/CSS/JS version, please visit https://codepen.io/Northstrix/pen/QwWoYzZ Vue Version https://namer-ui-for-vue.netlify.app/components/circular-testimonials This component (Next.js version) is also available on Namer UI https://namer-ui.netlify.app

• Slarivo Highlighter

  Highlighter, Particle, CTA

• Slarivo 3D Testimonails

  A marquee component continuously scrolls text, images, or videos in an infinite loop, with customizable speed, direction, and responsive design for engaging displays.

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Hero 1

  Centered hero with radial gradient background and announcement badge

• Slarivo Hero Badge

  A versatile, animated badge component for highlighting new features, announcements, or important links. Features: • Smooth entrance animations • Icon rotation on hover • Multiple size variants • Multiple style variants • Link and button functionality • Customizable icons • Responsive design • Accessibility features Notes: • Built with Framer Motion for smooth animations • Uses React Server Components (RSC) with the "use client" directive • Employs a responsive design with a mobile-first approach • Includes interactive hover animations • Supports TypeScript with proper types • Allows for custom styling and theming • Optimized performance through proper usage of hooks

• Slarivo Hero 1

  minimal hero with modern gradiental background

• Slarivo SaaS Template

  Modern Hero Section with Navigation - Dark Theme Landing Page Component A sleek, production-ready hero section with fixed navigation bar, perfect for SaaS landing pages and modern web applications. Features a stunning gradient text headline, announcement badge, and dashboard preview mockup with glowing effects.

• 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 Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Announcement

  A compound badge designed to display an announcement.

• Slarivo Announcement

  A compound badge designed to display an announcement.

• Slarivo Upgrade Banner

  An animated promotional banner component with floating gear icons and hover effects. Inspired by Vercel's upgrade prompts. Features - Smooth entrance animation - Interactive floating gear icons on hover - Dark mode support - Customizable button text and description - Optional close button - Responsive design - Accessible button interactions Perfect for: - Premium feature promotions - Upgrade notifications - Subscription upsells - Feature announcements Props - `buttonText` - Primary call-to-action text (default: "Upgrade to Pro") - `description` - Secondary descriptive text - `onClose` - Optional callback for close button - `onClick` - Callback for main button click - `className` - Additional CSS classes

• Slarivo Hero 3

  Left-aligned hero with dashboard screenshot preview

• Slarivo banner

  A stylish banner component for modern UIs, built with accessibility and animation in mind.

• Slarivo Sticky Banner

  Here is Sticky Banner component

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Badge Tag

  Here is Badge Tag

• Slarivo Alert Banner

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

• Slarivo Welcome Modal

  Welcome modal for new and existing users. Highlights expanded access to premium templates and $299 value lifetime license. Includes clear CTAs like "View templates" and "Get login assistance." Perfect for onboarding or upgrade announcements.

• Slarivo Banner Ui

  Here is Banner ui component

• Slarivo Banner Ui

  Here is Banner ui component

• Slarivo Banner Ui

  Here is Banner ui component

• Slarivo Marquee

  Very useful while showcasing comments or technologies

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Animated Slideshow

  - Animated hover slider

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Banner

  Banner alert inspired by shadcn/ui format

• Slarivo Animated Testimonials

  A clean animated testimonials section

• Slarivo Announcement

  A compound badge designed to display an announcement.

• Slarivo Announcement

  A compound badge designed to display an announcement.

• Slarivo Announcement

  A compound badge designed to display an announcement.

• 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 Motion Footer

  A high-fidelity Cinematic Scroll Reveal Footer optimized for modern SaaS and app landing pages. Built with a GSAP ScrollTrigger engine to create a smooth "curtain reveal" parallax effect. It features a built-in, physics-based Magnetic Button primitive for interactive glassmorphism pills with overshoot animations. The visual hierarchy includes a theme-adaptive animated aurora glow, dynamic grid patterns, a diagonal scrolling marquee, and giant masked typography. Fully portable in a single file, React Strict-Mode safe, and natively uses shadcn/ui and Tailwind v4 oklch tokens for automatic light/dark mode compatibility.

• 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 Hero Section

  Here is Hero section components

• 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 Team Showcase

  A magazine-style team section featuring a three-column staggered photo grid paired with an interactive member list. Photos default to grayscale; hovering a photo or a name entry simultaneously reveals the portrait in full color and highlights the corresponding name row. Includes social link icons (X, LinkedIn) that animate in on row hover.

• 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 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 Alert

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

• Slarivo Badge Tag

  Here is Badge Tag

• 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 Banner Ui

  Here is Banner ui component

• Slarivo Banner Ui

  Here is Banner ui component

• Slarivo Promote Header

  This PromoteHeader component is a fully responsive, feature-rich navigation header built with Next.js and React. It includes a sticky top bar with an announcement section, desktop and mobile navigation menus, a search input, theme toggle, and call-to-action buttons. The desktop version supports hoverable resource panels with icons, descriptions, and quick links, while the mobile drawer offers a collapsible menu with similar functionality. The component dynamically highlights active links, preserves theme preferences, and ensures accessibility with focus management and skip-to-content links, making it both user-friendly and visually appealing.

• Slarivo Banner

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

• Slarivo Banner

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

• 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 welcome

  A confirmation screen component with confetti animation, typically used after account creation.

• Slarivo Dynamic Square

  Here is Dynamic Squraes component

• 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 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 Badge

  An animated badge with radial gradient hover effect and an animated arrow path. Perfect for announcements and CTAs.

• 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 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 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 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 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 Maintenance Banner

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

• Slarivo Banner Ui

  Here is Banner ui component

• Slarivo ReferAndWinBanner

  A customizable, animated banner component featuring floating paper airplanes and decorative checkmarks—ideal for referral, promotional, or announcement sections.

• Slarivo Timeline

  A timeline component with sticky header and scroll beam follow.

• Slarivo FAQ

  A comprehensive FAQ section component with animated accordions, gradient styling, and an optional contact prompt. Built with shadcn/ui primitives and Framer Motion animations. Features - Header Section - Gradient text title - Optional description - Animated entrance - FAQ Items - Animated accordions - Smooth transitions - Progressive reveal animation - Interactive hover states - Gradient backgrounds - Status indicators - Contact Section - Optional inclusion - Custom call-to-action - Animated entrance - Configurable content

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Event Manager

  A comprehensive event management system with full calendar functionality. Features include multiple view modes (month, week, day, and list), drag-and-drop event scheduling, color-coded categories, and a powerful tagging system. The component supports advanced search and filtering by color, tag, or category, with smooth animations and hover effects that display quick event details. Fully responsive across all devices with touch-friendly controls, horizontal scrolling filters on mobile, and an intuitive interface for creating, editing, and organizing events. Perfect for scheduling applications, project management tools, or any system requiring sophisticated calendar functionality.

• 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 Integrations Component

  Here is Integrations Components

• Slarivo About Us section

  This component is ideal for an "About Us" or "Services" section on a company website, particularly for businesses in design, architecture, or related creative fields. It provides a modern, engaging, and informative presentation of the company's capabilities and achievements. Key Features: Responsive Layout: The component adapts its layout for different screen sizes, arranging content in a single column on small screens and a multi-column grid on larger ones. Parallax Background Elements: Decorative circular elements in the background move and rotate subtly based on scroll position, adding depth and visual interest. "About Us" Header: A clear and concise "About Us" heading is accompanied by a subtitle and an animated underline, effectively introducing the section. Company Introduction: A central paragraph provides a brief overview of the company's mission and values. Service Offerings: Six distinct service items (Interior, Exterior, Design, Decoration, Planning, Execution) are displayed. Each service includes an icon, a title, and a description. Services are strategically placed in left and right columns, flanking a central image. The ServiceItem sub-component features hover animations for icons and titles, along with a "Learn more" link that appears on hover. Central Image with Call to Action: A prominent image (Modern House) serves as a visual anchor. It features a subtle border animation, floating accent elements, and an overlaid "Our Portfolio" button that appears on hover. Animated Statistics (StatCounter): Four key statistics (Projects Completed, Happy Clients, Years Experience, Satisfaction Rate) are displayed with an animated counter format. The StatCounter sub-component uses framer-motion's useSpring and useTransform to animate numerical values as they come into view. Each stat includes an icon, a numerical value with a suffix, and a descriptive label, along with hover effects for the icon and a line underneath. Call to Action (CTA) Section: A clear and inviting call-to-action at the bottom prompts users to "Get Started" and encourages them to transform their space. Framer Motion Integration: The component heavily uses framer-motion for: Orchestrated Entrance Animations: Elements fade in and slide up or across as the section comes into view. Hover Effects: Interactive animations on service items, the central image button, and stat counters. Parallax Scrolling: Dynamic movement of background and accent elements based on scroll. Spring Animations: Smooth counting animation for statistics. Modular Design: The section is composed of reusable sub-components (ServiceItem and StatCounter), promoting organized and reusable code. The AboutUsSection component presents key information about a company—likely an interior design or architectural firm—through a combination of text, service listings, an engaging image, and animated statistics. It's built with a focus on modern aesthetics and user experience, incorporating subtle animations and parallax effects to create an immersive feel.

• Slarivo About Section

  Professional about section components featuring company stories, team showcases, mission statements, and brand narratives with elegant animations and responsive layouts

• Slarivo Testimonials

  Here is Testimonials components

• Slarivo CTA with Marquee

  Here is CTA with Marquee component

• Slarivo Marquee Effect

  The marquee component is designed to create a dynamic user experience by continuously scrolling text horizontally. This effect is perfect for highlighting important information, announcements, or news headlines that need to catch the user's attention. The smooth scrolling animation adds movement and liveliness to the interface, making important content more noticeable to users. This example was created using Tailwind CSS and Framer Motion.

• Slarivo Cta 4

  Call to action section with heading, description and button on left. Feature bullet list on right.

• Slarivo Sticky Scroll

  Here is Sticky Scroll component

• Slarivo CTA with Text Marquee

  Here is CTA with Text Marquee component

• Slarivo Feature Showcase

  The FeatureShowcase component is a responsive, theme-aware section built entirely with shadcn/ui primitives that blends storytelling and interaction. It pairs an informative left panel—featuring a headline, description, subtle stats, step-by-step accordion, and clear call-to-action buttons—with a dynamic right panel that displays tab-based media. Each tab reveals a full-bleed image that automatically fills the container, making the layout visually balanced and immersive. Ideal for product introductions or feature highlights, this component lets designers combine concise narrative content with interactive visuals to engage users across light and dark themes.

• Slarivo about section 2

  Professional about section components featuring company stories, team showcases, mission statements, and brand narratives with elegant animations and responsive layouts

• Slarivo Text Marque

  Here is text marquee component

• Slarivo Hero Pill

  A pill-shaped component for highlighting key features or messages with optional icons and animations. Features - Optional leading icon - Smooth entrance animation - Dark mode support - Customizable styles and animations - Hover effects

• Slarivo Notifications Menu

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

• Slarivo Animated Modal

  A customizable, compound modal component with animated transitions

• Slarivo Offer Carousel

  Offer Carousel This component provides a sleek, horizontally scrollable display for showcasing offers or featured items. It includes custom navigation arrows and smooth-scrolling functionality, with cards that animate on hover for an engaging user experience.

• Slarivo Testimonials

  Testimonials Section A responsive and animated component to showcase customer testimonials in a clean, grid-based layout.

• Slarivo Call to Action

  Here is Call to Action components

• Slarivo Animated Card

  Here is Animated Card component

• Slarivo Waitlist Landing Page with Countdown Timer

  A sleek waitlist component featuring a mesmerizing ethereal beam background, countdown timer, and social proof indicators. Perfect for product launches, beta releases, or early access campaigns. Includes email capture, user avatars showing recent signups, and a live countdown creating urgency. The dark theme with vibrant gradient effects creates an engaging, modern aesthetic that converts visitors into early adopters.

• Slarivo Card Curtain Reveal

  Interactive card component with open curtain to see content on hover

• Slarivo Magic Text Reveal

  A responsive particle-based text reveal component that disperses text into animated particles and reforms on hover with smooth transitions.

• Slarivo Marquee

  Infinite scrolling marquee component with customizable speed and direction.

• Slarivo Registration Stepper

  Registration Stepper A responsive and animated stepper component designed to guide users through a multi-step process. It visualizes the current, completed, and pending steps using an accordion-style layout with smooth transitions powered by framer-motion. The component is built with shadcn/ui principles, ensuring it's theme-adaptive and highly customizable through props.

• Slarivo Carousel

  Shareholder Reports Carousel This component displays a collection of reports in a horizontally scrollable carousel. It features navigation arrows that appear contextually based on the scroll position, providing a clean and intuitive user experience. The component is fully responsive, theme-adaptive, and built to be easily populated with data via props.

• Slarivo Notification Popover

  Notification popover component with framer motion and tailwind css.

• Slarivo Animated Project Cards

  This component renders a list of animated, expandable project cards with smooth framer-motion transitions, hover/tap effects, dynamic chevron toggling, and staggered child animations for category tags, metadata, and descriptions. Can be easily customizable for any accordion style component. Perfect for freelance dashboards, gig marketplaces, or any project listing interface where you want rich interactivity and polished microinteractions.

• Slarivo Accordion

  This accordion component features a clean and professional design that avoids traditional rotating chevrons. Instead, it uses subtle yet engaging visual cues to indicate the expanded state. Each accordion item displays a left-aligned icon that changes color when active, paired with a bold title and minimal right-aligned label.

• 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 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 Animated Badge

  An animated badge component with customizable text, color, and optional link functionality featuring a pulsing dot and smooth entrance animations.

• Slarivo Integration Showcase

  Integration Showcase This component displays a title, subtitle, an illustration, and a responsive grid of integrations. It's designed to be easily populated with your own data.

• Slarivo Offers Carousel

  Offers Carousel This component provides a visually polished layout to display a primary offer alongside a carousel of related items. It's built to be highly reusable, allowing you to pass in offer details and an array of items to display. Animations are handled by framer-motion for a smooth user experience.

• Slarivo Joblisting

  sleek animation job lisiting model type 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 Event Countdown Card

  This Event Countdown Card is a fully animated promotional block designed to highlight and convert users for upcoming live events. It features a real-time countdown timer, urgency cues (like “Starts Soon!”), dynamic hover states, and pulsing time units—all wrapped in a theme-aware, motion-optimized layout. It supports image backdrops, attendee stats, and customizable join actions. Perfect for workshop landing pages, webinars, tech meetups, product launches, or any scenario where live countdown urgency drives engagement and conversions.

• Slarivo Feature Highlight

  Feature Highlight Component This component animates a list of features, a title, and an icon into view with a staggered effect. It's built to be highly reusable—you can pass any text, icons, or custom elements as props.

• Slarivo Personal Landing

  A modern, responsive landing component with avatar, headline, social links, and a live message input with validation and toast notifications. Ideal for personal portfolios or digital profiles.

• Slarivo Image Reveal

  Here is image reveal component

• Slarivo Reveal links

  a reveal links interactive component

• Slarivo Notification Alert Dialog

  Here is Notification Alert Dialog 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 Notification Center

  Here is Notification Center component

• Slarivo Disclosure

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

• Slarivo Animated hero

  Animated hero with text and two shadcn/ui buttons

• 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 AI prompt Box

  AI prompt Box, AI chat Input, AI chat box, with search, with think, with thinking, with canvas, with audio recording

• 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 Vertical Cut Reveal

  A text component that reveals the text with a cut reveal effect. First, the text gets split into smaller chunks based on the splitBy prop: • words: Splits into individual words (e.g., "Hello world" → ["Hello", "world"]) • characters: Splits into individual characters (e.g., "Hi" → ["H", "i"]) • lines: Splits by newline characters (\n) • string: Splits by any custom string delimiter Each text piece is wrapped in two <span> elements: • An outer <span> acts as a container, set to position: relative and overflow: hidden. • An inner <span> holds the actual text, initially positioned off-screen using y: 100 (or -100 if reverse is true). When the animation kicks off: • The inner <span> elements smoothly transition from their off-screen position (y: 100) to their final position (y: 0). • This creates a "cutting" or "revealing" effect as each text piece slides into view. You can stagger the animation from different directions (first, last, center, or random) using the staggerFrom prop. A key detail is that the component always keeps word boundaries, even when splitting by characters. Here are two reasons why: 1. When dealing with multi-line text, each line starts its own reveal animation. So, if you have text that spans multiple lines, each line animates independently from its own baseline, instead of all elements animating from one point (like the bottom of the entire paragraph). 2. In characters mode, characters from the same word stick together in a word container. This stops unwanted line breaks in the middle of words. If a word needs to wrap to the next line, it wraps as a complete unit, keeping some characters from one line and others from the next. This keeps the text flowing and readable while still allowing character-by-character animation within each word.

• Slarivo Placeholders And Vanish Input

  Sliding in placeholders and vanish effect of input on submit

• Slarivo Modern Animated Sign In

  This design presents a sleek and user-friendly login page. The UI features a contemporary dark mode aesthetic with a deep blue background accented by subtle radial gradients that give depth.

• Slarivo AI Voice Input

  A voice input component with an animated visualizer and recording timer. It includes a demo mode, customizable visualizer, and recording callbacks. Features: • Animated audio visualizer • Recording timer display • Demo/preview mode • Start/stop callbacks • Dark mode support • Customizable visualizer bars • Mobile responsive

• Slarivo AI Input

  A modern, animated textarea input component designed for AI chat interfaces. It features auto-resizing, a voice input toggle, and an animated submit button. Features: • Auto-resizing textarea • Voice input toggle • Animated submit button • Press Enter to submit (Shift+Enter for a new line) • Dark mode support • Customizable height limits • Smooth animations • Mobile responsiveness

• Slarivo Confetti

  Confetti animations are best used to delight your users when something special happens

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Message loading

  Message Loading animation

• Slarivo AI Chat Input

  Animated and interactive AI chat input component.

• Slarivo Claude Style AI Input

  Claude style dynamic chat input that adapts its preview based on content type - showing code snippets for programming files, content previews for documents, and traditional previews for media.

• Slarivo AI Input With Loading

  A chat input component with a loading state animation featuring an auto-resizing textarea, loading spinner, and status message. Features: • Loading state animation • Auto-resizing textarea • Customizable loading durations • Dark mode support • Status messages • Keyboard shortcuts • Auto-animation mode • Mobile responsiveness

• Slarivo Chat Input

  AI Chat Input

• 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 Hero

  Animated Marquee Hero A visually engaging hero section featuring a dynamic text reveal and an infinite, animated marquee of images. Perfect for capturing user attention on a landing page.

• Slarivo Ruixen Moon Chat

  This RuixenMoonChat component is a visually minimalistic AI chat-style interface designed to sit just below the center of the screen against a full-screen moon-themed background image. The interface is inspired by the first empty-chat look of modern AI tools like ChatGPT, keeping the design lightweight, monochromatic (black, white, and neutral grays), and distraction-free. At the top center, there’s a bold white heading with a short tagline encouraging users to start typing. The main chat input box appears closer to the lower half of the screen and includes an auto-resizing textarea for smooth typing without manual resizing. A row of Quick Action buttons below the input provides ready-to-use prompts such as Generate Code, Launch App, UI Components, and more—ideal for developers exploring new ideas quickly. These buttons are styled as rounded, subtle pills with borders and icons from Lucide to keep the experience consistent and professional. The design avoids scroll bars and dark/light theme toggles, offering a clean black-and-white look that emphasizes the background image and central chat input. Overall, this component works well as a starting point for an AI-powered coding assistant or creative brainstorming tool.

• Slarivo AI Input

  AI Input popover

• Slarivo Claude-style Chat Input

  A replica of the Claude AI chat interface featuring a polished, auto-resizing text input, file attachment previews, and quick action chips. Includes smooth animations, dark mode support, and a refined "swoosh" underline aesthetic.

• Slarivo Animated sign in

  Animated sign in

• Slarivo IntegrationHero

  The IntegrationHero component is a visually engaging section designed to showcase integrations with popular tools. It features two horizontal rows of app icons that continuously scroll in opposite directions, creating a dynamic carousel effect. The component includes a central call-to-action with a headline, description, and a “Get Started” button, encouraging users to explore integrations.

• Slarivo AI Assistant Interface

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

• Slarivo lumina-interactive-list

  A sophisticated, hover-responsive showcase block designed for high-end creative portfolios and luxury brand websites. This component features a minimalist vertical navigation list (01–06) that dynamically updates a featured image preview. It balances "Quiet Luxury" typography with high-impact visuals, creating a "premium" user experience that feels both authoritative and mysterious. It is optimized for developers who want to display "Featured Creations" with an air of exclusivity and artistic depth.

• Slarivo Alert Dialog

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

• Slarivo AI Input with Suggestions

  A sophisticated text input component with selectable action buttons. It features an auto-resizing textarea, customizable actions, and visual feedback. Features: • Customizable action buttons • Auto-resizing textarea • Visual feedback for selected actions • Dark mode support • Keyboard shortcuts • Animated transitions • Mobile responsiveness

• Slarivo Animated Tabs

  Interactive tabs animated using clip path and framer motion

• Slarivo Animated Text

  Smoothly animate frequently–updating text, like text from a chatbot.

• Slarivo Animated Background

  The AnimatedBackground component visually highlights selected items by sliding a background into view when hovered over or clicked. This smooth transition helps users focus on the active item, making it ideal for interactive lists, menus, or navigations where clear selection feedback is important.

• Slarivo Reveal Text

  Animated text component that reveals each letter with a spring-in effect, hover-triggered image masking, and a timed overlay sweep for cinematic emphasis. Perfect for hero sections, splash screens, or landing pages where you want bold, interactive branding with visual flair.

• 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 Interactive Checkout

  Interactive checkout when adding items to shopping cart.

• Slarivo Interactive Text Particle

  A visually engaging canvas-based text effect for React that transforms text into interactive, hover-reactive particles. Designed for modern UI/UX experiences, this component adapts responsively to screen size, supports rich color palettes, and offers fully customizable animation dynamics—all with zero external dependencies. Perfect for landing pages, hero sections, and attention-grabbing banners.

• Slarivo Multimodal AI Chat Input

  A versatile React component for creating AI chat interfaces. Supports text input and file attachments (images, videos, audio, PDF, etc.) with interactive previews. Includes integrated send and stop buttons, automatic textarea resizing, and optional suggested actions for new conversations. Built using modern hooks and Tailwind CSS for easy styling

• Slarivo Prompt Input dynamic grow

  A prompt input that grow on click, with subtle glow, and a onFocus on click ripple effect. shrink when not anymore inFocus

• Slarivo AI Chat

  ai chat card animated

• Slarivo Interactive Changelog With Dialog

  Interactive Changelog With Dialog

• Slarivo Product Reveal Card

  This Product Reveal Card is a premium interactive e-commerce component that blends high-quality visuals with micro-interactions to increase conversion. It supports live hover reveals, animated star ratings, favorite toggling, discount badges, and a sliding overlay panel showcasing product details, features, and purchase actions. Perfect for modern e-commerce stores, AI-powered marketplaces, or drop-in Shopify/Headless CMS product listings where sleek UX and conversion-driven design are a priority.

• Slarivo Kanban

  here is interactive kanban board

• Slarivo Animated Scroll

  An animated two-panel scroll adventure

• Slarivo AI Actions

  A group of interactive buttons with optional tooltips, commonly used for message-level interactions like copy, like, share, etc.

• Slarivo Animated Video on Scroll

  Animated video on scroll with also reveal text effects

• Slarivo Changelog 1

  Modern Changelog view with versions, dates, description images. An array of changelog entries with stick scroll effect.

• Slarivo Modern Hero Section

  Modern hero section featuring bold headline typography, AI-focused subtext, and a collage of rounded-corner images arranged in an overlapping, floating layout to create depth and visual engagement.

• Slarivo Interactive Accordion

  A minimal accordion with numbered items featuring smooth spring animations, rotating plus-to-X icons, and progressive underline hover effects.

• Slarivo IA Siri Chat

  Voice Chat IA siri

• 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 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 Audio Chat

  Polished voice chat component with smooth expand/collapse animations.

• Slarivo Floating Chat Widget

  Floating chat widget with AI agent selection dropdown and animations

• Slarivo Marketing Badges

  Beautiful 3D marketing badges with smooth interactions.

• Slarivo Text Reveal

  Reveals text word-by-word, character-by-character, or line-by-line with smooth staggered entrance animations.

• Slarivo Stardust Button

  A premium pearl-finish button with celestial star animations and glass morphism effects. Features smooth hover transitions between star symbols (✧ ↔ ✦) and satisfying tactile press feedback. Perfect for launch pages, premium CTAs, and high-end product announcements.

• Slarivo Interactive-Gradient-Background

  Interactive Graident Background with pointer movement

• Slarivo Card Status List

  This component displays a dynamic list of status-driven cards with built-in syncing animations, hover-activated actions, and staggered motion transitions using framer-motion. It supports syncing state transitions (updates-found → syncing → completed), animated status indicators, and optional back/add button callbacks. Perfect for onboarding flows, document indexing, status updates, guided setup sequences, or any app section where users must complete a set of progressive tasks.

• Slarivo Interactive Hover Links

  Interactive hover links with fluid cursor tracking, animated typography, and floating preview images.

• Slarivo Interactive Hover Button

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

• Slarivo Animated Radio

  An animated radio button group with a smooth sliding purple glider that moves vertically to highlight the selected option.

• Slarivo Sidebar

  Business-Ready Interface: Real-time stats cards with trend indicators Activity feed with categorized actions and timestamps Quick action buttons with color-coded categories Comprehensive layout that scales across screen sizes Professional Details: Status indicators (online/offline states) Role-based information (Senior Administrator) Consistent iconography throughout the interface Accessibility features (proper ARIA labels, tooltips)

• Slarivo Radial Intro

  A circular intro animation component that arranges elements in a radial layout, smoothly transitioning them into orbit with looping motion.

• Slarivo Orbiting Carousel with Animated Icons

  This variation of the Orbiting Carousel adds a layer of interactivity with animated icons. Each item in the carousel not only orbits but also features its own animation, drawing attention and adding a playful touch to your UI.

• Slarivo Animated Card

  AnimatedJobCard This component displays job posting information with a subtle, interactive 3D tilt animation on hover. It's designed to be highly reusable, accepting props for content and color variants.

• Slarivo Orbiting Avatars

  Orbiting Avatars CTA Description: A visually engaging Call-to-Action (CTA) component that displays a central message, a button, and a configurable set of avatars that gently float and orbit around the content. It's designed to highlight community, contributors, or users in a dynamic way.

• Slarivo Animated Reveal Text

  Animated Reveal Text

• Slarivo Feature Accordion Section

  This component provides an interactive and visually engaging way to present key features in an organized layout. The left section highlights important items with clear icons, images, and counts, while an accordion ensures that detailed information can be expanded or collapsed as needed.

• Slarivo AI Prompt Box

  An animated AI prompt input with expanding textarea, keyboard shortcuts, model selector, and file attachments.

• 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 Alert

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

• Slarivo Card

  Alert Card A visually engaging, animated alert card to deliver

• Slarivo Alert Badge

  Alert Badge inspired by Tremor

• Slarivo Animated Cards Stack

  - Reveal card depending on scroll position with animations

• Slarivo Reveal on hover

  Animated card with gesture animations, that reveal hidden content and scale main image on hover

• Slarivo Header Navbar

  A responsive site header with a navigation bar, animated logo, optional banner slot, and an animated mobile disclosure menu.

• Slarivo Banner Ui

  A Banner Ui component for highlighting product updates, promotions, and time-sensitive notices, featuring banner, responsive behavior.

• Slarivo Card

  Flexible container component for grouping related content and actions.

• Slarivo Expandable Consent Banner

  A bottom cookie-consent banner with accept and reject actions plus a Customize control that expands inline switches for analytics and marketing consent categories.

• Slarivo Cookie Consent

  A floating cookie consent banner with per-category switches, accept/reject/save actions, and a choice persisted to localStorage.

• Slarivo Welcome Banner

  A dashboard hero banner that announces a redesigned interface with a headline, short pitch, download CTA and illustration, used as the first widget on an admin/app homepage.

• Slarivo Coming Soon Launch Teaser

  A full-viewport "coming soon" landing section with a badge, animated word-by-word serif headline, sub-copy and a disabled CTA above a glowing sparkle horizon, for a product launch or under-construction page.

• 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.