SLARIVO / DIALOGS / MODALS

Dialogs / Modals Components

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

• Slarivo Alert Dialog

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

• Slarivo Dialog

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

• Slarivo Dialog Modal

  Here is deactivationg two-step modal dialog

• Slarivo Modal

  Display popup content that requires attention or provides additional information.

• Slarivo Dialog Info

  Here is dialog information filling component

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Alert Dialog

  Alert Dialog

• Slarivo Dialog

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

• Slarivo Responsive Modal

  Here is Modal component

• Slarivo Modal

  This smart Modal component auto-switches between a Dialog and Drawer based on screen size using context. It gives you a seamless, unified API for building mobile-friendly popups, side panels, or modals with full Radix/vaul support—super handy for responsive UIs.

• Slarivo Dialog

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

• Slarivo Dialog

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

• Slarivo Dialog

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

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

  A flexible React + Tailwind CSS Sheet (Drawer) component built with Radix UI, featuring animated slide-in panels from any side. Perfect for dashboards, modals, mobile menus, and responsive UI layouts.

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

  A flexible and beautifully styled Drawer component built using Vaul (Radix-based) primitives. It supports all drawer directions (top, bottom, left, right) with smooth animations, backdrop blur, and slots like header, body, and footer—making it ideal for responsive menus, sidebars, or modal-like panels in modern React apps.

• Slarivo Morphing Dialog

  A dialog that uses layout animations to transition content into a focused view. It supports click-outside and escape key functionalities for closing.

• Slarivo Dotted Dialog

  A customized dialog component based on shadcn/ui Dialog with a dotted background pattern inspired by Motion.dev website. Features: • Dotted background pattern with blur effect • Dark/light theme support • Fully accessible (based on Radix UI) • Smooth animations for open and close states • Responsive design • Includes all standard dialog components (header, footer, title, description)

• Slarivo Animated Modal

  A customizable, compound modal component with animated transitions

• Slarivo Modal

  Display popup content that requires attention or provides additional information.

• Slarivo Modal

  Display popup content that requires attention or provides additional information.

• Slarivo Modal

  Display popup content that requires attention or provides additional information.

• 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 Warp Dialog

  A visually striking dialog component with 3D warp animations and smooth transitions. Features perspective transformations, animated backgrounds, and spring-based motion effects for an immersive user experience.

• Slarivo Auth Modal

  A modern authentication modal with Google and email login options. Clean UI, smooth animations, and ready to plug into your Next.js app.

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

  Display content in a separate view from the existing context.

• Slarivo Credenza

  Ready-made responsive modal component for shadcn/ui. Dialog for desktop and Drawer for mobile

• Slarivo Stacked Dialog

  Here is Stacked Dialog component

• Slarivo Drawer

  A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support. Supports bottom, top, left, and right positions with default, inset, and straight variants.

• Slarivo Dialog

  Here is dialog component

• Slarivo Dialog

  Here is minimalistic dialog

• Slarivo Progressive Blur Modal

  Here is Progressive Blur Modal component

• Slarivo Prediction Market Card

  This is an interactive prediction market card component that lets users place live bets on time-sensitive sports outcomes, featuring a dual-view layout with a dynamic voting interface and a smooth animated betting modal. It includes motion-enhanced progress bars, real-time countdown, responsive bet shifts, and visual feedback for both “Yes” and “No” votes—all wrapped in a polished, mobile-ready UI. Perfect for real-time sports betting platforms, social prediction apps, or any gamified finance interface that needs fast user engagement with rich data display and dynamic transitions.

• Slarivo Modal

  Here is Modal component

• Slarivo Share Dialog

  Here is minimalistic share dialog

• Slarivo Dialog

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

• Slarivo Dialog

  A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

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

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

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

  A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.

• Slarivo Hero Video Dialog

  A hero video dialog component.

• Slarivo Img Sphere

  A React TypeScript component that displays images arranged in a 3D sphere layout. Images are distributed using Fibonacci sphere distribution for optimal coverage. Supports drag-to-rotate, momentum physics, auto-rotation, and modal image viewing.

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

  Enhanced shadcn/ui command

• Slarivo Bento Gallery

  Interactive Image Bento Gallery Description: A responsive, horizontally draggable bento-style gallery designed exclusively for images. It features smooth animations powered by Framer Motion, a clean shadcn/ui aesthetic, and an elegant full-screen modal for viewing individual images.

• Slarivo Alert Dialog

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

• Slarivo Alert Dialog

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

• Slarivo Alert Dialog

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

• Slarivo Alert Dialog

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

• Slarivo Alert Dialog

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

• Slarivo Search Modal

  A powerful command palette with keyboard shortcuts, categorized results, and live search filtering. Perfect for SaaS apps, dashboards, and productivity tools to deliver a fast, intuitive, and modern search experience.

• Slarivo Morphing Dialog

  A dialog that uses layout animations to transition content into a focused view. It supports click-outside and escape key functionalities for closing.

• Slarivo Expandable Card

  A versatile and engaging UI component that allows users to explore content in a more immersive way.

• Slarivo Nested Dialog

  A versatile and accessible nested dialog component that enables stacking multiple dialogs within each other. Perfect for complex user interactions like payment flows, multi-step forms, or any scenario requiring hierarchical modal interfaces. Features - Nested Dialog Support: Stack multiple dialogs with proper focus management and keyboard navigation - Responsive Design: Fully responsive layout that works seamlessly on mobile and desktop - Keyboard Accessibility: Full keyboard navigation support with ESC key handling for nested dialogs - Customizable Positioning: Support for different dialog positions (top, bottom, left, right) - Shadcn/UI Integration: Built with shadcn/ui components for consistent styling - Animation Support: Smooth enter/exit animations for both parent and child dialogs - Type-Safe: Written in TypeScript with full type safety Example Use Cases - Payment Flows: Multi-step payment processes with method selection - Settings Panels: Nested configuration options - Form Wizards: Multi-step form processes - Confirmation Dialogs: Nested confirmation within existing dialogs - Detail Views: Showing detailed information without leaving the current context

• Slarivo Animated Comman Menu

  Animated Comman Menu

• Slarivo Avatar Uploader

  An interactive avatar uploader with image cropping and preview that supports custom aspect ratios, size limits, and file validation. Perfect for profile pictures, user onboarding flows, and account settings pages.

• Slarivo Modal Pricing

  A modal to choose between two pricing.

• Slarivo useClickOutside

  A hook that handles clicks outside of a specified element

• Slarivo Alert Dialog

  Alert Dialog

• Slarivo Interactive Changelog With Dialog

  Interactive Changelog With Dialog

• Slarivo Contacts Table With Modal

  The ContactsTable component is a production-ready data table that displays a list of contacts with advanced filtering, sorting, and selection capabilities. It features a grid-style layout with multi-select checkboxes, connection strength indicators, Twitter follower counts, and email information, allowing users to quickly browse and identify key contacts. The component includes a detail modal for viewing full contact information, export functionality for CSV and JSON formats, and pagination support, making it ideal for CRM applications, outreach platforms, and contact management systems.

• Slarivo Services with Animated Hover Modal

  A responsive services component that displays a list of offerings. On hover, a modal follows the cursor, revealing project images with smooth scaling and transition effects. Built with GSAP for cursor‑following animations and Framer Motion for scale transitions.

• Slarivo React Tailwind Image Gallery

  A responsive React component for displaying an image gallery with hover-zoom effects, customizable grid spans, and a fullscreen modal lightbox—built with Tailwind CSS.

• Slarivo Modern Payment Form

  This modern Payment Modal UI component presents a sleek and user-friendly design for selecting payment options. With clear buttons for different payment methods like PayPal, users can quickly initiate their preferred transaction flow. The modal includes styled input fields for billing and card details, enhancing readability and usability. The layout is visually structured to guide users through the payment process step-by-step, offering both form validation and interactive feedback cues.

• Slarivo Tour

  Make your own product tour with shadcn/tour.

• Slarivo Modal Drop

  Here is Modal component

• Slarivo Connect Wallet Modal

  Connect Wallet Modal A responsive and theme-adaptive modal dialog that allows users to select from a list of crypto wallets. The component is highly reusable, accepting a list of wallets as a prop. It features subtle hover animations and an entrance animation for the wallet list, creating a polished user experience.

• Slarivo Draggable Modal Component

  This code implements a draggable modal component using React and Framer Motion. It solves the problem of creating an interactive and visually appealing modal that can be closed by dragging a handle. The component utilizes Framer Motion's animation capabilities for smooth transitions and intuitive drag interactions. Here's a step-by-step breakdown: 1. **State Management:** The `useState` hook manages the modal's open/closed state. 2. **Measurements:** `useMeasure` from `react-use-measure` gets the height of the drawer for animation calculations. 3. **Framer Motion Integration:** `useMotionValue`, `useAnimate`, and `useDragControls` from Framer Motion handle animation, drag gestures, and control the drag behavior respectively. The `motion` component from Framer Motion is used to create animated elements. 4. **Drag Interaction:** The modal's handle is draggable along the y-axis. When the user drags the handle downwards beyond a 100px threshold, the `handleClose` function is triggered. 5. **Animation:** `useAnimate` orchestrates the closing animation, which includes fading out the overlay and sliding the drawer upwards. 6. **Accessibility:** While not explicitly shown, ensuring proper ARIA attributes for screen readers is crucial for accessibility (not included in the example). This component can be applied in various scenarios, such as creating interactive dialog boxes, confirmation modals, or custom draggable panels in web applications. The example demonstrates a draggable modal with content that can be dismissed by dragging its handle downwards. The smooth animations and intuitive drag behavior enhance user experience. The use of Framer Motion simplifies the creation of complex animations. Libraries used include React for UI and Framer Motion for animation and drag interactions.

• Slarivo Error

  Error Overlay This component displays a modal overlay, typically used for showing compile-time errors or critical alerts, mimicking the style of modern development tools like Vite. It is fully accessible and supports both light and dark themes out-of-the-box.

• Slarivo Dialog

  A fluid dialog with spring animations, backdrop overlay, and composable header/footer/title components. Built on Radix UI with Framer Motion.

• Slarivo Reshaped Modal

  Controlled overlay dialog with an active flag and onClose handler that locks page scroll while open. Supports center, bottom, start, end and full-screen positions with matching slide animations, custom size and padding, Modal.Title/Subtitle composition with the Dismissible utility, focus management and a transparent overlay mode for side panels.

• Slarivo Modal

  An accessible, animated modal dialog with focus trapping, scroll locking, backdrop and escape dismissal, and title/description/footer slots.

• Slarivo Thumbnail button video player

  The ThumbnailButton component displays a video thumbnail that, when clicked, opens a modal video player. It supports both YouTube embeds (via youtubeId) and direct video URLs (via videoUrl), and it gracefully handles missing thumbnail or video sources by falling back to sensible defaults.

• Slarivo Dialog Stack

  Stacked dialog component inspired by Radix UI Dialog. Accessible. Customizable. Open Source. Pre-styled for shadcn/ui. Features • Stacked dialog interface with smooth transitions • Keyboard navigation support • Accessible by default • Customizable styling • Previous/Next navigation controls • Responsive design • Fully typed with TypeScript Props DialogStack • open?: boolean - Controls the open state • onOpenChange?: (open: boolean) => void - Callback when open state changes • clickable?: boolean - Enables clicking on previous dialogs to navigate back DialogStackTrigger • asChild?: boolean - Merges props onto child element instead of rendering button DialogStackContent • className?: string - Additional CSS classes • children: ReactNode - Dialog content • index?: number - Dialog position in stack (auto-populated) • offset?: number - Visual offset between stacked dialogs DialogStackNext/Previous • asChild?: boolean - Merges props onto child element • children?: ReactNode - Button content • className?: string - Additional CSS classes Example Use Cases • Multi-step forms • Onboarding flows • Wizards • Sequential content presentation • Guided tutorials

• Slarivo Ai Models Preview

  Ai Models Preview with dialog details smooth sleek animation designed block with props

• Slarivo Terms & Conditions

  Here is Terms & Conditions dialog

• Slarivo Animated Modal

  A modal with arc-shaped appear trajectory

• Slarivo Video Modal

  Example component for demonstrating Video Modal component

• Slarivo Author Form Card

  AuthorFormCard A responsive and theme-adaptive card component for creating or updating author profiles. It features an image upload area, input fields with tooltips, and integrated animations using framer-motion.

• Slarivo Input Modal

  Here is Input Modal component

• Slarivo Notification Alert Dialog

  Here is Notification Alert Dialog component

• Slarivo Dialog

  This component is a beautifully styled "Edit Profile" dialog box built using ShadCN UI and Tailwind CSS. It features a gradient header background, a rounded avatar image upload section, and a responsive, scrollable form layout. Users can update their full name, role, email, portfolio, and bio, with live character count feedback for the bio section. The design uses a modern radial gradient and smooth layout, ensuring a pleasant user experience across devices.

• Slarivo Timesheet Confirmation

  This file contains the reusable Timesheet Confirmation component. It's designed to be highly customizable through props, uses shadcn/ui theme variables for styling, and includes animations for a modern feel.

• Slarivo Invite Member Modal

  This provides a clean and user-friendly modal for inviting team members via email, with role selection options for Owner or Member. Ideal for SaaS platforms and business apps managing teams and organizations.

• Slarivo Auth Dialog

  This component is a combined Sign Up and Login modal built with ShadCN UI and React. It allows users to toggle between signing up and logging in without opening separate dialogs, providing a seamless authentication experience. The form dynamically adjusts its fields based on the mode, showing the Full Name input only during Sign Up. The password field includes a show/hide toggle using Lucide Eye and EyeOff icons for better usability. Additional features include a Google sign-in button, responsive layout, and a terms acknowledgment for Sign Up.

• 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 Privacy Policy Modal

  This component is a Privacy Policy modal built using ShadCN UI and React. It displays a scrollable privacy policy that users must read before accepting. The content is dynamically rendered from a JavaScript array of sections, making it easy to update or extend. As users scroll, a progress bar visually indicates how much of the content has been read. The “Accept” button is disabled until the user has scrolled to the bottom, encouraging them to review the entire policy. The modal is fully responsive, with a clean layout separating the header, scrollable content, and footer buttons, and adapts to both light and dark modes.

• Slarivo Team Invite

  A modern team invitation and member management component with permission controls

• Slarivo CreateWorkspaceModal

  A clean and intuitive workspace creation modal with input fields, slug preview, and action button. Ideal for SaaS apps, team collaboration tools, and project management dashboards.

• Slarivo Dialog

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

• Slarivo Dialog

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

• Slarivo Dialog

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

• Slarivo TeamInviteDialog

  This component is a modern Team Invite Dialog that allows users to quickly invite multiple team members via email or a magic link. Each member can be assigned a specific role (like Member, Admin, or Viewer) using a clean, card-style input layout. The interface is compact, responsive, and visually engaging, with interactive features such as dynamic addition of email fields, tooltips, and visual feedback when the invite link is copied. It provides an efficient and user-friendly way to manage team invitations within a web application.

• Slarivo File Upload

  here is minimalistic file upload component

• 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 Table With Dialog

  This Advanced User Management Table component is a feature-rich and modern UI built entirely with Shadcn UI. It combines a fixed header for clarity, interactive row selection using checkboxes, and a status badge system that visually distinguishes between active, inactive, and suspended users. Each row comes with an actions menu, allowing quick operations like viewing details, editing, or deleting a user, and destructive actions are highlighted with white text on a red background for clear visibility. Additionally, a dialog opens on demand, providing a focused space to display or edit detailed user information without leaving the table. The design is clean, responsive, and highly practical for dashboards, CRMs, and admin panels, making it a versatile component for managing user data efficiently.

• Slarivo Alert Dialog Icon

  Here is Alert Dialog Icon component

• Slarivo Minimal Payment Modal

  This component is a minimal and responsive payment modal that allows users to select a subscription plan and enter their card details to complete the payment. The selected plan dynamically updates the payment amount displayed on the submit button. It includes optional coupon code input, clean single-column input fields for cardholder name, card number, expiry, and CVC, and a compact design that works well on both desktop and mobile. The component emphasizes simplicity, clarity, and ease of use while keeping all essential payment interactions within a single dialog.

• Slarivo Table Dialog

  This component is a feature-rich, interactive data table built entirely with Shadcn UI components. It includes a fixed header and footer, allowing the table body to scroll independently, which ensures that column labels and summary information remain visible at all times. Each row includes a checkbox for selection, with the ability to select multiple rows at once. Actions for each row are accessible through a dropdown menu, offering options like “Edit” and “Delete.” The Edit action opens a dialog where all fields of the selected row can be modified using input fields and select menus, keeping the table layout intact and avoiding inline edits that can disrupt the table’s appearance. This design makes the table both highly reusable and user-friendly, suitable for applications that require structured data management, quick updates, and a clean, consistent interface.

• 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 Disclosure Intro

  Here is Disclosure Intro Demo component

• Slarivo MarkerPopup

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

• Slarivo Dialog Deactivate

  Here is account deactivation dialog

• Slarivo Info Dialog

  Here is info filling dialog page

• Slarivo Dialog Projectstarter

  Here is minimalistic project started dialog page

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog 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 Number Pad

  A customizable number pad component for entering numeric values, supporting various formats like currency, phone, decimal, integer, percentage, pin, and time. Features both button-based and keyboard input with type-specific validation and formatting.

• Slarivo Dialog

  A pop-up layered above the application window or dialog, which makes the background content inert.

• Slarivo Cookies Banner

  Cookies Banner with sleek design and dark mode supported

• 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 Dialog box

  Make changes to your profile here. Click save when you're done. These match the style and intent of your previous dialog and are clear, concise, and user-friendly. If you want a more personalized or detailed version, let me know your preferences!

• Slarivo Redeem

  RedeemDialog A modal dialog that allows users to enter and submit a redemption code. It features a loading state for asynchronous validation and uses framer-motion for a subtle entry animation on the visual card element.

• Slarivo Cookies

  Here is Cookie Consent Popup component

• Slarivo The Dialog

  Here is Dialog components

• Slarivo HeroUI AlertDialog

  HeroUI AlertDialog for critical confirmations, with status icons, placements, backdrop variants, sizes, custom icons, dismiss behavior, controlled state and custom trigger examples. Uses the real @heroui/react component with bundled @heroui/styles CSS.

• Slarivo 8bit Pause Menu

  An 8-bit styled in-game pause menu overlay built on the retro card and button primitives. Shows a 'Paused' panel with pixel-art Resume, Restart and Quit actions.

• Slarivo Error Alert Dialog

  Here is Error Alert Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Advanced Image Uploader

  ChatGPT said: This Advanced Image Upload & Crop component is a highly interactive and user-friendly tool built entirely with Shadcn UI components. It allows users to upload multiple images either by clicking a button or using the drag-and-drop area, making it versatile for different workflows. Each uploaded image is displayed as a preview in a responsive grid, with options to crop or remove the image.

• 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 Chatgpt Prompt Input

  This is a complete replica of the chatgpt prompt input some may call it chat input or prompt box or promptbox

• 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 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 Modern Mobile Menu

  Mobile Menu, Mobile Nav, Mobile Navbar, Mobile navigation, Modern Mobile Menu, Mobile Dock, Dock, Bottom Nav, Navigation, Menu

• Slarivo FlowButton

  FlowButton

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo AI Chat Input

  Animated and interactive AI chat input component.

• Slarivo Limelight Nav

  A sleek and modern navigation bar with a unique "limelight" effect that follows the active tab. This component is designed to be both highly functional and visually appealing, providing a smooth and intuitive user experience. Part of the EaseMize UI library, it's incredibly easy to integrate into your projects and customize to fit your brand's aesthetic. The component is built with TypeScript and is fully typed for a better developer experience

• 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 Fluid menu

  A fluid circular menu that elegantly expands to reveal navigation items with smooth icon transitions

• 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 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 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 Inline Dropdown

  Context menu with hold to click and text input hidden Full credits to : https://github.com/haaarshsingh https://ui.harshsingh.xyz/inline-dropdown

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo The Dialog

  Here is Dialog components

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Dialog

  Here is Dialog component

• Slarivo Identity Verification Dialog

  This IdentityVerificationDialog component is a polished, enterprise-grade dialog that presents identity verification in a structured and trustworthy way. The centerpiece is a virtual identity card, styled like a real card with a masked ID, name, and validity date, giving users a sense of formality and security. Unlike simple stacked dialogs, this layout uses a two-column design: the card is showcased on the left as the visual anchor, while the right side contains the verification form with clear instructions, a secure PIN input, and action buttons. Built with shadcn/ui and enhanced by Framer Motion animations, the component feels modern, professional, and smooth in interaction. It’s an ideal fit for fintech, enterprise security, onboarding, and KYC workflows, where building user trust and delivering a premium verification experience is essential.

• Slarivo Daily Tracker Dialog

  This component is a Daily Productivity Tracker modal that allows users to manage and track their daily tasks in a simple, interactive way. Users can mark tasks as completed, add new tasks, and instantly see their progress for the day. Designed to be minimal and responsive, it provides visual feedback with checkmarks and strikethroughs for completed tasks, making it easy and motivating for users to stay on top of their daily goals.

• Slarivo Floating Panel

  Here is Floating Panel component

• Slarivo Audio Show Creator

  Audio Show Creator A comprehensive UI component for creating and configuring an audio show from a document. It features options for format, voice selection, engine, and quality, all wrapped in a clean, modal-like card. It uses framer-motion for a smooth entry animation.

• Slarivo Drawer

  A customizable drawer component built on top of Vaul with smooth animations and flexible positioning.

• Slarivo indevuiSheet

  Here is modern sheet component by indevui

• Slarivo Credit Card Dialog

  This CreditCardDialog component is a sleek, professional dialog built with shadcn/ui that simulates the look and feel of a modern virtual credit card. The centerpiece is a visually rich card element styled with a gradient background, chip detail, masked card number, cardholder name, and expiry date — giving it an authentic credit card aesthetic. The dialog is designed for scenarios where a user needs to activate or authenticate a digital card by entering an activation code. Smooth animations powered by Framer Motion enhance the experience, while the input and action buttons are clearly separated in a structured layout. This makes the component ideal for fintech dashboards, virtual banking apps, or SaaS platforms where a polished, trust-inspiring credit card UI is needed. It balances functionality and design, providing both an engaging user experience and a practical flow for secure actions like card activation.

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

  A fluid dialog with spring animations, backdrop overlay, and composable header/footer/title components. Built on Radix UI with Framer Motion.

• Slarivo YouTube Video Player

  An expandable YouTube video player that shows a thumbnail with a play button and opens into a full-screen modal iframe with smooth animations.

• Slarivo The Dialog

  This is dialog component

• Slarivo indevDialog

  here is modern dialog by indev ui

• Slarivo Modal Card

  modern modal card

• Slarivo One Alert Dialog

  Buttons component from the 21st.dev community.

• Slarivo BeUI Drawer

  Buttons component from the 21st.dev community.

• Slarivo Testimonial Section 2

  An animated testimonial section with scrolling marquee rows of customer capsules that open a full quote in a modal on click.

• Slarivo Auth Modal

  An animated authentication modal with social login buttons and email sign-in, opened from a trigger button.

• Slarivo BeUI Morphing Modal

  Buttons component from the 21st.dev community.

• Slarivo Image Preview

  A clickable image thumbnail that opens a full-size lightbox preview in a modal overlay with a close button.

• Slarivo Responsive Modal

  Here is Modal component

• Slarivo Basic Modal

  Here is Basic Modal component

• Slarivo Code Editor Sheet

  A sleek, accessible code editor sheet powered by shadcn/ui, Ace Editor, and Radix UI supporting multiple languages with syntax highlighting and theme switching. Easily integrate customizable, interactive code editing into your web applications.

• Slarivo Crypto Swap

  The CryptoSwapComponent is a modern, interactive crypto token swapping interface designed with advanced UX motion and clean, glassmorphic visuals. It supports live token selection, real-time price conversion, animated balance updates, slippage tolerance configuration, and a secure transaction flow with state feedback (loading, success, error). The component uses framer-motion for dynamic animations, glowing hover effects based on cursor tracking, and smooth modal transitions for selecting tokens and adjusting settings. It’s ideal for DeFi dashboards, crypto wallets, or DEX frontends looking for a polished, user-friendly swap experience that feels premium and responsive.

• Slarivo Magnetic Drawer

  A physics-based bottom drawer that can be dragged and snaps to configurable magnetic snap points with spring animation.

• Slarivo Shared Element Transition Dialog

  A dependency-free hold-to-delete dialog with shared-element transitions, native dialog semantics, Shadow DOM, and reduced-motion support.

• Slarivo Drawer

  Display content in a separate view from the existing context.

• Slarivo Modal Drop

  A Modal Drop component for focused confirmations, forms, details, and temporary tasks, featuring modal, animated transitions, click and selection states, responsive behavior.

• Slarivo Modal Drop

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

• Slarivo Modal Drop

  A Modal Drop component for focused confirmations, forms, details, and temporary tasks, featuring modal, spring, confirmation, close button.

• Slarivo Command

  A Command component for finding and filtering content, commands, products, or records, featuring command, command palette, command-palette, search.

• Slarivo The Dialog

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

• Slarivo The Dialog

  A The Dialog component for representing people, teams, and account identity, featuring invite teammate, invite-teammate, invite member, invite-member.

• Slarivo The Dialog

  A The Dialog component for focused confirmations, forms, details, and temporary tasks, featuring otp, input otp, input-otp, verification.

• Slarivo Reshaped Modal

  Controlled overlay dialog with an active flag and onClose handler that locks page scroll while open. Supports center, bottom, start, end and full-screen positions with matching slide animations, custom size and padding, Modal.Title/Subtitle composition…

• Slarivo Reshaped Modal

  Controlled overlay dialog with an active flag and onClose handler that locks page scroll while open. Supports center, bottom, start, end and full-screen positions with matching slide animations, custom size and padding, Modal.Title/Subtitle composition…

• Slarivo Reshaped Modal

  Controlled overlay dialog with an active flag and onClose handler that locks page scroll while open. Supports center, bottom, start, end and full-screen positions with matching slide animations, custom size and padding, Modal.Title/Subtitle composition…

• Slarivo Reshaped Modal

  Controlled overlay dialog with an active flag and onClose handler that locks page scroll while open. Supports center, bottom, start, end and full-screen positions with matching slide animations, custom size and padding, Modal.Title/Subtitle composition…

• Slarivo Reshaped Modal

  Controlled overlay dialog with an active flag and onClose handler that locks page scroll while open. Supports center, bottom, start, end and full-screen positions with matching slide animations, custom size and padding, Modal.Title/Subtitle composition…

• Slarivo HeroUI Drawer

  HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.

• Slarivo HeroUI Drawer

  HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.

• Slarivo Animated Drawer

  A bottom drawer built on vaul that smoothly animates its height as it transitions between multiple views, shown here as a crypto wallet settings panel.

• Slarivo Expandable Dialog

  Responsive modal dialog with an expand/collapse toggle that smoothly animates between a compact and an enlarged size, with a scrollable body.

• Slarivo Morphing Dialog

  A card that expands into a full-screen modal with a shared-layout morphing animation, opening its image and title into an expanded detail view.

• Slarivo Date Range Calendar in Dialog

  A two-month calendar for picking a start and end date range, opened inside a modal dialog from a trigger button.

• Slarivo Invoice Form with Line Item Dialog

  An invoice builder form that adds each billable line item through its own validating dialog before appending it to the list and computing the total.

• Slarivo Sheet with Scrollable Content

  A side sheet (drawer) that opens from the right with a long, vertically scrollable body — ideal for terms & conditions, policies, or any lengthy content with header and footer actions.

• Slarivo Headless Dialog

  A renderless, fully-managed dialog primitive with built-in accessibility and keyboard support and animated flip transitions, for building completely custom dialogs and alerts.

• Slarivo Edit Profile Dialog

  An edit-profile dialog with an avatar, name, email and bio fields opened from an ellipsis menu button, built on Base UI primitives.

• Slarivo Gallery Modal Accordion

  An interactive image gallery where thumbnails expand accordion-style on hover and open into an animated fullscreen modal with title and description.

• Slarivo Logout Confirmation Dialog

  A centered alert dialog that asks the user to confirm before logging out, with an icon, message, and a split No / Yes, Logout button footer.

• 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 Drawer (Base UI)

  A panel that slides in from any edge of the screen with swipe-to-dismiss gestures, built on Base UI primitives.

• Slarivo Billing Warning Alert Dialog

  An alert dialog that warns users their subscription is expiring and prompts them to update their payment method.

• Slarivo Quick Actions Grid Drawer

  A bottom drawer that reveals a 4-column grid of quick action buttons (edit, share, download, delete and more) with a destructive variant and a cancel footer.

• Slarivo Invite Team Dialog

  A modal dialog with an icon header and email field for inviting teammates to join a workspace.

• 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 Command Menu with Global Search

  A searchable command palette dialog that lets users find chats, images, documents, and projects across an app, with type filters and recent/last-opened sections.

• Slarivo Information Drawer

  Team profile grid that opens a full-height detail drawer per member. GSAP-tweened slide + staged bio fade-in, native scroll lock, reduced-motion fallback.

• Slarivo File Upload

  Most upload widgets fall over on the three things that really happen: wrong file type, file too big, transfer fails halfway. This one handles all three — per-file progress, retry, and guards that explain themselves. Part of Documents & Signing:…

• Slarivo Share Dialog

  Invite by email, set what each person can do, and decide whether the link works for anyone at all — with wording that says what the choice actually does, instead of three words nobody can tell apart. Part of Documents & Signing: layro.vercel.app.

• Slarivo Keyboard Shortcuts

  A searchable keyboard-shortcuts cheat sheet. Press ? to pop a grouped, filterable list of every hotkey - written once as compact strings like 'mod+k' and rendered as platform-aware keycaps (Cmd on Mac, Ctrl elsewhere). Focus-trapped, Esc to close,…

• Slarivo Animated Dialog

  An accessible Radix dialog with motion-driven enter/exit choreography (scale, slide-up, or fade) that turns into a bottom sheet on mobile and keeps its header/footer pinned while the body scrolls.

• Slarivo Classic Header with Sheet Menu

  A responsive site header with a centered nav, ghost sign-in link and pill call-to-action button that collapses into a slide-out sheet menu on mobile.

• Slarivo Grayscale Mosaic Gallery

  A four-by-two photo mosaic grid where tiles turn from grayscale to color on hover and open a lightbox dialog with the photo's caption and location.

• Slarivo Blocking Consent Dialog

  A modal cookie consent dialog that dims and blocks the page until the visitor accepts all, rejects, or opens cookie preferences.

• Slarivo Base Alert Dialog

  A confirmation alert dialog for destructive or irreversible actions, built on Base UI with a 3D perspective blur entrance/exit animation, optional media icon slot, and a compact size variant.

• Slarivo Onboarding Checklist Drawer

  A right-side drawer panel showing onboarding progress with a progress bar and an interactive, checkable task checklist.

• Slarivo Keyboard Shortcuts Sheet

  A slide-out sheet panel that lists categorized keyboard shortcuts, each rendered with monospace key badges and section separators.

• Slarivo Team Invite Sheet

  A slide-out sheet for inviting team members by email with role selection and a live pending-invites list.

• Slarivo Edit Profile Sheet

  A slide-out sheet panel containing a profile edit form with labeled inputs, a header description, and footer save/cancel actions.

• Slarivo Sheet (Different Directions)

  A slide-out sheet (drawer) panel that can open from any edge — top, right, bottom, or left — with a header, form fields, and footer actions.

• Slarivo Smooth Drawer

  An animated bottom drawer with spring-staggered content, a pricing block, and shimmer call-to-action button, ideal for upsell and paywall prompts.

• Slarivo Base Alert Dialog

  A confirmation alert dialog for destructive or irreversible actions, built on Base UI with a 3D perspective blur entrance/exit animation, optional media icon slot, and a compact size variant.