SLARIVO / TOASTS

Toasts Components

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

• Slarivo Toast

  This is a simple toast

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

  Here is Toast component

• Slarivo Basic Toast

  Here is Toast component

• Slarivo Toast

  A succinct message that is displayed temporarily.

• Slarivo Toast

  Here is Toast component

• Slarivo 8-bit Toast

  Pixel-art toast notification from 8bitcn.com — wraps Sonner with retro pixel borders (Sonner inlined via esbuild).

• Slarivo indevuiToaster

  Here is toaster component by indevui

• Slarivo UltraQualityToast

  An accessible, animated React notification toast system built with Tailwind CSS. Supports success, error, warning, and info variants with stacking, auto-dismiss, and manual close.

• 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 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 Twitter Testimonial Cards

  These cards were imported from a very popular 21st cards component and adapted for twitter, improved hover state so user can see entire card, improved on mobile, and made theme aware.

• Slarivo Basic Toast

  Here is Toast component

• Slarivo Basic Toast

  Here is Toast component

• Slarivo Basic Toast

  Here is Toast component

• Slarivo Basic Toast

  Here is Toast component

• Slarivo Basic Toast

  Here is Toast component

• Slarivo Basic Toast

  Here is Toast component

• Slarivo Sonner

  An opinionated toast component for React.

• Slarivo Hero Section

  Floating Food Hero A visually engaging hero section featuring a central text block surrounded by gently floating images. It's designed to be responsive and theme-aware, making it perfect for landing pages of food-related applications.

• Slarivo useCopyToClipboard

  Copy text to the clipboard easily with useCopyToClipboard, while keeping track of the most recently copied value.

• Slarivo Popover

  Here is Popover component

• Slarivo Cookie Banner

  The CookiePanel is a compact, bottom‑right floating cookie consent banner built with Next.js, TypeScript, TailwindCSS v4, and Lucide icons. It presents users with a clear cookie policy message, quick Accept all and Customize actions, and theme‑aware styling. Clicking Customize smoothly expands an inline preferences panel inside the toast, letting users toggle cookie categories without leaving the page. Preferences are saved to localStorage and the banner closes automatically upon saving, ensuring a clean, interruption‑free user experience. Built‑in slide/fade animations are handled purely with Tailwind’s tw-animate-css utilities for a lightweight, modern feel.

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Text Rotate

  A text component that switches the rendered text from a list.

• Slarivo Logo Cloud 3

  Clients component from the 21st.dev community.

• Slarivo Alert

  Alert in shadcn/ui format

• Slarivo Floating Icons Hero Section

  Playful and tech-savvy. Centered bold headline with subtext, surrounded by floating soft-shadowed app icons. Creates a futuristic, ecosystem vibe. Ideal for SaaS, tech platforms, or integration-focused products

• Slarivo Logo Cloud 2

  Stylish logo grid featuring top tech brands with decorative plus icons and dynamic borders for a modern visual layout.

• Slarivo Sonner

  An opinionated toast component for React.

• Slarivo Stack Feature Section

  This component is a React + Tailwind CSS hero section with a heading, subtext, and call-to-action buttons on the left, plus an animated multi-orbit icon display on the right.

• Slarivo Bottom menu

  original by @raunofreiberg icons by @nucleoicons

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

  A succinct message that is displayed temporarily.

• Slarivo Toast

  A succinct message that is displayed temporarily.

• Slarivo Popover

  A beautifully wrapped Radix Popover with custom slots, animations, and sections like header, body, and footer — all styled for seamless integration. Easily build interactive popups with consistent UI and flexible layout support.

• Slarivo Popover

  A beautifully wrapped Radix Popover with custom slots, animations, and sections like header, body, and footer — all styled for seamless integration. Easily build interactive popups with consistent UI and flexible layout support.

• Slarivo Stacked alerts

  Stacked alerts

• Slarivo Text Scramble

  A component of text which changes its nature and randomises and finally settles down and shows a scramble effect.

• Slarivo layered text

  Layered text with 3D perspective and smooth hover animations

• Slarivo Save Changes Toast

  Clerk.dev save changes toast

• Slarivo Special Text

  Animated text with scramble effect.

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

  Here is Popover component

• Slarivo Popover

  Here is Popover component

• Slarivo Popover

  Here is Popover component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• 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 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 Download Toast

  This project is a responsive React component that displays a list of file downloads with a sleek, modern design. It features an animated background, light/dark modes, and a progress bar for active downloads.

• Slarivo Alert

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

• Slarivo Google Drive Uploader Toast

  Displays a minimalistic toast in the corner of the UI that shows real-time upload progress for multiple files. Features include file type detection, expandable/collapsible list, progress tracking, success/error states, and the ability to cancel uploads.

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

  A popover is an overlay element positioned relative to a trigger.

• Slarivo Custom Alert

  This Custom Animated Alert component is a modern alternative to the standard ShadCN alert, designed with motion-based transitions and default props for usability. By default, it displays a title and description so developers don’t need to pass in content every time, making it immediately functional out of the box. Each alert variant—success, error, warning, or info—is represented with a clear Lucide icon, ensuring quick recognition. The alert appears with a smooth fade and scale animation, and users can dismiss it using the close button for a clean experience.

• 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 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 Sonner Toast

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

• Slarivo Sync Status Toast

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

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

  Here is Sidebar Component

• Slarivo Floating Action Menu

  A floating action menu component made with framer motion and tailwind css.

• Slarivo Faq

  Here is Faq component

• Slarivo Features

  Here is Features Component

• Slarivo Features

  Here is Features Component

• Slarivo Bento Product Features

  Grids & Bento component from the 21st.dev community.

• Slarivo Testimonials

  Here is Testimonials components

• Slarivo Testimonials

  Here is Testimonials components

• Slarivo Team

  Here is Team component

• Slarivo Sticky Scroll

  Here is Sticky Scroll component

• Slarivo Globe Hero

  Dot Globe Hero – A modern, interactive 3D globe hero section built with React Three Fiber and Tailwind CSS. Perfect for SaaS landing pages, dashboards, or portfolios, this component adds a visually striking, tech-forward centerpiece that’s fully responsive, themeable, and reusable.

• Slarivo Dot Loader

  Here is Dot Loader component

• Slarivo Card Carousel

  Here is Card Carousel component

• Slarivo Accordion 05

  Accordion with hiding title

• Slarivo Spatial Product Showcase

  A high-fidelity hero section designed for displaying dual-state products or variations. Features fluid layout transitions powered by Framer Motion, reactive background gradients that adapt to the active item, and a sleek floating control dock. Fully responsive, accessible, and data-driven.

• 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 Menu Vertical

  Here is Menu Vertical component

• Slarivo Pie Chart

  Here is Pie Chart component

• Slarivo 3D Folder

  A reusable 3D Folder component

• Slarivo Popover

  A beautifully wrapped Radix Popover with custom slots, animations, and sections like header, body, and footer — all styled for seamless integration. Easily build interactive popups with consistent UI and flexible layout support.

• Slarivo Popover

  A beautifully wrapped Radix Popover with custom slots, animations, and sections like header, body, and footer — all styled for seamless integration. Easily build interactive popups with consistent UI and flexible layout support.

• Slarivo Popover

  A beautifully wrapped Radix Popover with custom slots, animations, and sections like header, body, and footer — all styled for seamless integration. Easily build interactive popups with consistent UI and flexible layout support.

• Slarivo Animated Comman Menu

  Animated Comman Menu

• Slarivo Feature Sections

  Here is Feature Sections component

• Slarivo Clean Testimonial

  Clean testimonial component with unique features.

• Slarivo Bento Monochrome

  Here is Bento Monochrome component

• Slarivo Testimonial

  Here is Testimonial component

• Slarivo Typewriter Testimonial

  Here is Typewriter Testimonial component

• Slarivo Analytics Bento

  Polished budget bento card with smooth interactions.

• Slarivo Apple Spotlight

  A beautiful search component inspired by macOS Spotlight.

• Slarivo Particle Hero

  The component includes all the stunning visual effects like animated particles, rotating spotlights, and the gold mode toggle functionality,

• 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 Dot Flow

  here is Dot Flow component

• Slarivo Popover

  A versatile popover component for displaying contextual content, forms, and interactive menus with smooth animations. Features: • Smooth open and close animations • Form handling with textarea • Menu-style interactions • Command palette functionality • Project status displays • Click outside detection • Keyboard navigation • Dark mode support • Custom trigger variants • Flexible content layouts • Compound component pattern • Accessibility features Notes: • Built with Framer Motion for smooth animations • Utilizes React Context for state management • Handles click outside and escape key events • Employs a responsive design with a mobile-first approach • Includes TypeScript support with proper types • Integrates seamlessly with Shadcn UI components • Supports custom styling and theming • Optimized for performance with proper hooks usage

• Slarivo Header 05

  Header like apple with menu and search

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Bento Monochrome 1

  Here is Bento Monochrome 1 componehnt

• Slarivo Testimonals Carousel

  Here is Testimonals Carousel 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 dropdown 01

  A reusable component for dropdown

• Slarivo Circular Command Menu

  Circular Command Menu, toggled circular menu with default 5 menu components ,easily custamizable animated menu component

• Slarivo Tilt Card

  Here is Tilt Card component

• Slarivo Breadcramb

  Displays a hierarchy of links to the current page or resource in an application.

• Slarivo Bento Features

  Here is Bento Features componhent

• Slarivo Tech Solutions Hero Section

  A responsive, grid-based showcase component for HAOS Tech Solutions with a customizable registry-ad background slot, dark-mode support, and accessible controls.

• Slarivo Accordion Multi-level

  Here is accordion multi-level component

• Slarivo Flower menu

  Here is modern minimalistic flower menu component

• Slarivo Animated Menu

  A reusable component for animated menu

• Slarivo Feature Section

  Feature Section A responsive and theme-adaptive component designed to showcase a product's key features. It includes a main title, a subtitle, a grid of features with icons, and a final call-to-action card. It's built to be highly reusable by accepting all content through props.

• Slarivo Menu Item Card

  Menu Item Card This component displays a food item with its image, price, name, and an interactive "ADD" button. It's designed to be highly reusable and customizable through props.

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

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• 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 Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• 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 AI Input

  AI Input popover

• Slarivo AI Assistant Interface

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

• 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 Morphing Popover

  A popover that transforms from its trigger into the content using layout animations. It visually morphs instead of appearing as a separate element.

• Slarivo Glow Button

  A clean glowing button that pops off the screen. On hover, a subtle glare slides across the surface, giving it that shiny, futuristic vibe. It also reacts with a soft press animation when clicked, making it feel alive. Works in both light and dark mode without extra setup. Perfect for flashy CTAs like Generate, Start, or Launch.

• Slarivo Bolt Style Chat

  A Bolt inspired hero chat interface with a prompt input, model selector, glowing ray background, and modern dark UI for AI product landing pages.

• Slarivo Text Marque

  Here is text marquee component

• Slarivo Animated Text

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

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

  A striking hero section with glowing animated text that instantly grabs attention. Perfect for bold headlines, product launches, or landing pages with dramatic flair.

• 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 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 Voice Input

  An interactive voice recording interface with animated visual feedback, timer display, and customizable start/stop callbacks.

• Slarivo Gooey Marquee

  The component uses two text layers - a blurred background layer with high contrast filtering and linear gradients for the gooey effect, and a clean foreground layer for readability.

• Slarivo AI Actions

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

• Slarivo Social Icons

  This is a social icons navigation like icons hover with a tooltip.

• 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 Notification Popover

  Notification popover component with framer motion and tailwind css.

• Slarivo Animated Menu

  Animated Menu bar with test transitions on hover easy transitions .

• Slarivo MacOS Menu Bar

  Menus component from the 21st.dev community.

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

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

• 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 Quick Tooltip Actions

  Quick tooltip actions for the user. Hover on the user icon to see the tooltip.

• Slarivo OTP Dialog

  This component is an OTP (One-Time Password) verification dialog designed for secure and user-friendly authentication. It allows users to enter a 4-digit OTP sent to their email or phone, shows a live countdown timer indicating when the OTP can be resent, and provides clear feedback messages for success or errors. The layout is compact, responsive, and visually appealing, featuring centered inputs, rounded borders, and distinct buttons for verifying or resending the OTP, making the verification process intuitive and seamless.

• Slarivo Bubble Text

  Bubble Text Hover Animation

• 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 Modern animated multi words

  Modern animated multi words

• Slarivo Reveal Text

  This component displays animated, theme-adaptive text with a ripple reveal effect on hover.

• Slarivo Animated Tooltip

  Here is animated tooltip component

• Slarivo Icon Accordion

  An accordion component with icons, titles, and descriptions for each section. Ideal for organizing content, features, or settings into collapsible panels, making information easy to browse and interact with.

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

  Interactive 3D Text Effect A WebGL text component that creates a dynamic ripple effect when you hover over it. The text "bubbles up" from the surface based on mouse proximity, with smooth animations and automatic light/dark theme support. Features 3D displacement shaders, crisp SVG text rendering, and responsive design. Perfect for modern, interactive hero sections.

• Slarivo Floating Card

  A reusable card component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb 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 Dynamic Island TOC

  A sleek Dynamic Island-inspired Table of Contents component for React and Next.js with animated expansion, scroll spy tracking, reading progress, smooth scrolling, automatic heading detection, and support for custom TOC elements.

• Slarivo Cuisine Selector Chips

  This code implements an interactive cuisine selector component. It allows users to select multiple cuisines from a predefined list. The component utilizes a functional approach, leveraging React's useState hook for managing selected items. The core functionality involves toggling the selection state of each cuisine when a button is clicked. The component dynamically updates the UI to reflect the user's choices. It enhances user experience with smooth animations and visual feedback powered by Framer Motion. The visual style includes a checkmark that appears when a cuisine is selected, smoothly animating in and out. The styling uses a dark theme and is responsive. The component addresses the need for a user-friendly and visually appealing way to allow users to select multiple options from a list, particularly useful in applications like food delivery apps, recipe websites, or preference settings. The component iterates through a predefined array of cuisines, creating a button for each. Each button uses Framer Motion's animation capabilities for hover, tap, and selection state changes, providing smooth visual feedback. The selected cuisines are stored in an array managed by the useState hook. The toggleCuisine function updates this array, adding or removing cuisines based on user interaction. The Check icon from the lucide-react library is used to visually indicate selected cuisines. The component's animations are carefully configured to ensure a smooth and engaging user experience. It can be applied in various scenarios, such as filtering options, preference settings, or interactive forms where multiple selections are required. For example, a food delivery app could use this component to let users select their preferred cuisines, a recipe website might use it to filter recipes, or a survey could use it to allow multiple-choice answers.

• Slarivo Special Card

  Here is Special Card component

• Slarivo Discussion

  A component for displaying nested discussions or comment threads.

• Slarivo Processing Card

  Here is Processing Card component

• 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 Testimonial Card

  Testimonial Card This component, TestimonialCard, is designed to be a flexible and reusable element for displaying reviews and features. It accepts props for all dynamic content, including testimonials, features, ratings, and even the header logo, making it highly adaptable for different use cases beyond just Trustpilot.

• Slarivo Default

  Here is according default component

• Slarivo Ai chat input

  A modular, single-file React input bar designed for generative AI interfaces and agentic chat workloads, built on the shadcn/ui and Tailwind CSS architecture. Features dynamic spring-physics transitions (cubic-bezier engine) for height scaling, state-morphing typography, an integ

• 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 Accordion Space

  Here is Accordion component

• Slarivo Corner Frame Scramble Text

  A flexible and elegant text component wrapped in a corner frame with a scramble animation effect. Built with Tailwind CSS and Framer Motion, it visually enhances dynamic text values like stats, counters, or identifiers while maintaining accessibility and styling consistency.

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

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

• Slarivo Action Hint

  A particle emitter that shows an ephemeral action-feedback hint above an element and fades it out, for confirming actions like copy, save, or share.

• Slarivo Use Toast

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

• 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 Sonner Toast

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

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