SLARIVO / POPOVERS

Popovers Components

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

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

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

• Slarivo Popover

  Here is Popover component

• Slarivo Popover

  Displays rich content in a portal, triggered by a button.

• Slarivo Reshaped Popover

  Overlay attached to any interactive trigger element via passed attributes, opening on click or hover. Automatically repositions within the viewport with controllable fallback positions, supports custom content padding, a Dismissible close button, custom or trigger-aligned width, controlled state and focus trapping.

• 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 simple popover for quick user interactions over existing content. It pops up on command, and closes easily with a click outside or on a close button.

• Slarivo Popover

  Displays rich and interactive content in a portal, triggered by a button or other interactive element.

• Slarivo Popover

  Here is Popover component

• Slarivo Base Popover

  A floating panel that appears on demand. Built on top of Base UI Popover component with shadcn styling.

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Popover

  Displays rich content in a portal, triggered by a button.

• Slarivo Popover

  Displays rich content in a portal, triggered by a button.

• Slarivo Popover

  Displays rich content in a portal, triggered by a button.

• Slarivo Popover

  Displays rich content in a portal, triggered by a button.

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

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

  shadcn/ui-like implementation of balloons.js

• Slarivo Floating Panel

  A headless, composable floating panel component

• Slarivo Card Curtain Reveal

  Interactive card component with open curtain to see content on hover

• Slarivo Emoji Picker

  A lightweight, unstyled, and composable emoji picker for React.

• Slarivo Popover

  Here is Popover component

• Slarivo Popover

  Here is Popover component

• Slarivo Popover

  Here is Popover component

• Slarivo Popover

  Here is Popover component

• Slarivo Tooltip

  A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.

• Slarivo Context Card

  Tooltip

• Slarivo Balloons Pop background

  pop balloons when mouse hover

• Slarivo Tooltip

  A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

• Slarivo Monthly Heatmap Calendar

  This Monthly Heatmap Calendar component is a fully interactive scheduling tool built entirely with shadcn/ui. It allows users to navigate across different months and years using clean dropdown selectors while still displaying a structured grid view of the month. Each day cell supports adding events through a popover form, where users can enter a title and select a specific time. Scheduled events are visually marked with a badge indicator, and event details can be viewed, edited, or deleted directly within the popover. The calendar layout is spaced for clarity, making it easy to scan through days while still keeping event management compact and intuitive. This component is particularly useful for task planning, booking systems, or productivity dashboards, offering a more feature-rich and customizable experience compared to traditional date pickers.

• Slarivo Help Button

  Here is help button component

• Slarivo Context Card

  Tooltip.

• Slarivo Family Button

  Here is Family Button component

• Slarivo Column Collaboration Table

  This is a Column Collaboration Table built entirely with Shadcn UI components. It allows users to add and view comments directly on each column header, making it ideal for collaborative data review or team analysis. Each column features a chat icon that opens a popover, where multiple comments can be added, viewed, and scrolled through. The table body is scrollable for large datasets, while the header and footer remain sticky, ensuring that column titles and summary information are always visible. The footer displays the total number of rows dynamically. The design is clean, minimal, and fully compatible with both light and dark themes, making it highly reusable and suitable for professional applications where collaboration and clarity are key.

• Slarivo Relative Time Card

  Popover to show a given date in local time.

• Slarivo Preview Card

  Here is Preview Card component

• Slarivo Relative Time Card

  Popover to show a given date in local time

• Slarivo Dialog

  Here is Dialog component

• Slarivo HeroUI Color Picker

  HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value, editable channel fields, hue/alpha sliders, and preset swatches. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.

• Slarivo Popover

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

• Slarivo Popover

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

• Slarivo Base Popover

  A floating panel that appears on demand. Built on top of Base UI Popover component with shadcn styling.

• Slarivo Notifications Carousel

  This Notification Carousel component offers a fresh and unique take on handling user alerts. Instead of stacking notifications in a typical list, it displays them as individual cards inside a horizontal carousel that users can navigate with simple left and right controls. Each card includes a clear title, description, and timestamp, while a badge on the bell icon shows the total count of notifications. The popover is centered to the trigger for a clean, intuitive look, and the design works seamlessly in both dark and light themes.

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Popover

  Displays rich content in a portal, triggered by a button.

• Slarivo Marquee

  Very useful while showcasing comments or technologies

• Slarivo Accordion

  Enchanced shadcn/ui accordion

• Slarivo Filters

  A Linear inspired component to add / edit filters

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Popover

  Enhanced shadcn/ui popover

• Slarivo Sidebar

  A hover sidebar, inspired by Supabase's sidebar.

• Slarivo Placeholders And Vanish Input

  Sliding in placeholders and vanish effect of input on submit

• Slarivo Highlighter

  Highlighter, Particle, CTA

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• 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 Popover [react-aria-components]

  A popover is an overlay element positioned relative to a trigger. There is no built in way to create popovers in HTML. Popover helps achieve accessible popovers that can be styled as needed.

• Slarivo Workspaces

  a flexible, context-based solution to manage and display multiple workspaces in your app. It uses Radix Popover, supports avatars, search, and customizable rendering—perfect for SaaS dashboards with multi-tenant support.

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

  Popover Form

• Slarivo HoverPeek Link Preview

  An interactive link preview component. Displays a preview card on hover, supporting dynamic website screenshots . Features smooth animations (card flip, optional mouse follow) and magnifying lens effect for inspecting the preview content.

• Slarivo Date Picker [react-aria-components]

  A DatePicker combines a DateField and a Calendar popover to allow users to enter or select a date value. A date picker can be built using <input type="date">, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. DatePicker helps achieve accessible and international date and time pickers that can be styled as needed.

• Slarivo Notification Popover

  Notification popover component with framer motion and tailwind css.

• Slarivo Popover

  Here is Popover component

• 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 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 Dropdown Range Date Picker

  The DropdownRangeDatePicker is a popover-based date range selection component that combines intuitive navigation with a compact input interface. Built with shadcn/ui and react-day-picker, it features dropdown menus for selecting month and year, allowing users to jump directly to any part of the calendar without excessive navigation. The selected range is displayed within a styled input button, with long date ranges gracefully truncated to fit while still providing a clean preview of the chosen values. With built-in Clear and Apply actions, this component is ideal for booking systems, scheduling workflows, and dashboards where users need to quickly pick and confirm date ranges in a modern, space-efficient way.

• Slarivo Icon Picker

  A Component responsible for making all lucide react icons available for selection and returning the icon name.

• Slarivo Magnified Bento

  A bento grid with magnification effect on hover.

• Slarivo Data Table Filter

  This React component creates a customizable filter for data tables. It addresses the need for a clean, user-friendly way to filter table data based on various criteria. The component leverages the power of the shadcn/ui library for its UI elements and Tailwind CSS for styling, ensuring a consistent and visually appealing experience. **Functionality Breakdown:** 1. **Props-Driven Configuration:** The component is highly configurable through its props. You define the filter label, available options (each with a value, label, and optional icon), selected values, and a callback function to handle changes. The `isMultiSelect` prop controls whether users can select multiple filter options. 2. **Interactive Popover:** The filter displays as a button that, when clicked, reveals a popover containing a list of filter options. This uses the `@/components/ui/popover` component. 3. **Command Component for Options:** Filter options are rendered using the `@/components/ui/command` component, providing a familiar and accessible interface for selecting options. Each option is displayed with its label and optional icon. A checkmark indicates selected options. 4. **State Management:** The component manages the currently selected filter values internally using React's `useState` hook. Multi-select and single-select logic are carefully handled to ensure correct behavior. 5. **Dynamic Button Text:** The filter button dynamically updates its text to reflect the current selection (e.g., showing the selected option, or "(x selected)" for multiple selections). 6. **Clear and Select All:** For multi-select filters, "Select All" and "Clear Filter" buttons are provided for convenient bulk actions. 7. **Accessibility:** The component incorporates appropriate ARIA attributes (`aria-expanded`, `aria-haspopup`, `aria-selected`, `aria-label`) to enhance accessibility for screen readers and assistive technologies. **Libraries and Concepts:** - React: For building the component's UI and managing its state. - shadcn/ui: Provides the UI components (Button, Popover, Command). This library is built with Tailwind CSS. - Lucide-React: Library for providing the icons. - Tailwind CSS: Used for styling. - TypeScript: Used for type safety and better code maintainability. **Use Cases:** - Filtering data in tables based on status, priority, category, date, etc. - Creating advanced filtering capabilities in applications with large datasets. - Enhancing user experience by providing a streamlined way to filter information. **Example Scenarios:** - Filtering tasks by their status (active, pending, completed). - Filtering products based on category or price range. - Filtering users by their role or location.

• Slarivo Smart Popover

  This SmartPopover gives you a mobile-first popover/drawer combo that auto-adapts based on screen size. It wraps Radix Popover and Vaul Drawer with a shared context, so you write it once and it just works—perfect for menus, filters, or actions on both mobile and desktop.

• Slarivo Event Scheduler

  This component is a date scheduling widget built entirely with Shadcn UI. It combines a popover, a calendar picker, and an event list to give users a simple way to plan and manage their schedule. The button serves as a trigger that, when clicked, opens a popover directly below it containing a calendar interface. Users can select a date, and then add events for that day, which are displayed in a clean, card-like layout beneath the picker. Each event also includes a delete option, allowing quick modifications to the schedule.

• Slarivo Calendar Date & Time range

  Here is Shadcn Calendar component with Date and Time range picker

• Slarivo Notifications Toggle

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

• Slarivo Calendar Date and Time range

  Here is Shadcn Calendar component with Date and Time range picker

• Slarivo Notifications

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

• Slarivo Calendar input

  Here is calendar input with date picker

• 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 Ai Chat Input

  This AI Chat Input component with Popover Commands is an enhanced input interface inspired by ChatGPT-style chat boxes, designed using shadcn UI. It provides a smooth and modern typing experience while supporting advanced features like trigger-based commands. When users type the / key, a popover appears, showing a list of available commands (e.g., Insert Emoji, Attach File, Summarize, Generate Code). Instead of inserting options directly, users can preview and select from the menu, ensuring better control and flexibility. The component also includes a smiley icon for quick emoji access, making conversations more expressive. With its responsive design and support for both light and dark themes, this component is highly reusable, customizable, and easy to integrate into AI chat systems, messaging dashboards, or productivity apps. It balances simplicity and functionality, offering a familiar yet feature-rich user experience.

• Slarivo Relative Time Card

  Popover to show a given date in local time.

• Slarivo One Clipboard

  Popovers component from the 21st.dev community.

• Slarivo Mode Selector

  Standalone mode selector pill button with built-in popover. Bring your own icons or omit them; renders a non-interactive label when given a single mode. Self-contained port from 21st.dev Agent Elements.

• Slarivo 8bit Hover Card

  An 8-bit styled hover card component with pixel-border overlay. Renders a retro popover panel on hover using CSS group-hover, no Radix dependency.

• Slarivo Reshaped Popover

  Overlay attached to any interactive trigger element via passed attributes, opening on click or hover. Automatically repositions within the viewport with controllable fallback positions, supports custom content padding, a Dismissible close button, custom or trigger-aligned width, controlled state and focus trapping.

• Slarivo Popover

  An accessible popover that anchors a floating panel to a trigger, auto-flips and clamps to stay in view, with a pointing arrow and spring-based open/close animation.

• Slarivo Popover (Radix UI)

  An animated popover built on Radix UI primitives with side-aware panel motion, squircle corners, and size-aware content transitions.

• Slarivo Button

  Renders a clickable button or an element styled as a button with advance options

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Animated Card Diagram

  Here is Animated Card Diagram component

• Slarivo Navbar

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

• Slarivo Card Carousel

  Here is Card Carousel component

• Slarivo Navigation Bar

  Here is Navigation Bar component

• Slarivo Pie Chart

  Here is Pie Chart component

• Slarivo Drawer

  A drawer component for React.

• Slarivo Button

  Here is magic button component

• Slarivo Animated Card

  Here is Animated Card component

• Slarivo Project Card

  A visually appealing card component designed to showcase projects. It features a hover-to-zoom image effect, a clear content section, and a call-to-action link, all while adapting to both light and dark themes using shadcn's CSS variables.

• Slarivo Button

  Neobrutalism-styled button component.

• Slarivo Fallback Card

  Here is Fallback Card component

• Slarivo Container Text Flip

  Here is Container Text Flip component

• Slarivo Carousel

  Here is Carousel component

• Slarivo Carousel

  Here is Carousel component

• Slarivo Form

  Here is Form component

• Slarivo Basic Dropdown

  Here is Basic Dropdown component

• Slarivo Toast

  Here is Toast component

• Slarivo Dot Flow

  here is Dot Flow component

• Slarivo Pricing Component

  Pricing Component with sleek design and better handling

• Slarivo Profile Dropdown

  Here is profile dropdown component

• Slarivo Composer Input

  Composer Input A versatile and responsive composer component for rich text input, file attachments, and actions. Styled with shadcn/ui principles, it's ideal for chat applications, comment sections, and content creation forms.

• Slarivo Checkbox

  Here is modern minimalistic checkbox component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo dropdown 01

  A reusable component for dropdown

• Slarivo Expandable

  Here is expandable component

• Slarivo Weather Card

  Here is Weather Card component

• Slarivo Expanded Tabs

  Here is Expanded Tabs component

• Slarivo Swipe Button

  Here is Swipe Button component

• Slarivo Button Retro

  Here is Button Retro component

• 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 Accordion Multi-level

  Here is accordion multi-level component

• Slarivo Playing Card

  An interactive component inspired by a playing card, featuring a dynamic background. This component is also available on Namer UI: https://namer-ui.netlify.app Watered-down Vue version: https://namer-ui-for-vue.netlify.app/ Credit: https://ui.aceternity.com/components/canvas-reveal-effect

• Slarivo Accordion

  Here is Accordion component

• Slarivo Switch Button

  Here is Switch Button component

• Slarivo Button

  Here is animated hover button component

• Slarivo Stock Card

  Stock Card This component, StockCard, displays stock information with a smooth hover animation. It's designed to be highly reusable, accepting props for the logo, ticker, name, price, and percentage change.

• Slarivo Feature Card

  Feature Card A versatile, theme-adaptive card component with built-in animations to showcase product features elegantly.

• Slarivo Price

  Pricing Card Component This component is designed to be highly reusable and customizable through props. It uses framer-motion for animations, cva for handling style variants (like the "popular" state), and shadcn/ui theme variables for seamless light and dark mode support.

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

  An interactive 3D tag cloud component

• Slarivo Animated Tooltip

  A cool tooltip that reveals on hover, follows mouse pointer Features: - Mouse Following: The tooltip moves and rotates with your cursor. - Spring Animation: Enjoy smooth, springy animations for a natural feel. - Hover Effects: Tooltips pop up with fade and scale effects when you hover. - Avatar Display: Circular profile pics with a stylish border. - Gradient Accents: Cool gradient lines add flair to the tooltip. - Group Layout: Stack avatars for a neat overlapping look. - Responsive Images: Next.js Image takes care of loading and optimizing images. Example Use Cases: - Team Member Display: Show team info when you hover. - User Lists: Highlight user details in social features. - Contributor Sections: Feature project contributors. - Member Grids: Showcase community or organization members. Props: - id: A unique identifier. - name: The display name. - designation: The role or title. - image: The avatar image URL.

• Slarivo Interactive Selector

  A visually striking, interactive React component showcasing premium camping options with smooth animations, responsive layout

• Slarivo Carousel

  A customizable carousel with microinteractions and slider.

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

  - Animated hover slider

• Slarivo Bottom menu

  original by @raunofreiberg icons by @nucleoicons

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

  A dock with animated icons that grow on hover.

• Slarivo Reveal on hover

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

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

  This component renders three concentric semi-circle orbits populated with app icons that display tooltips on hover. It includes a large blurred radial gradient in the background, fading upward to overlap the heading and description for added depth. The design adapts for light and dark modes, using black or white fades to keep the glow visible in both themes.

• Slarivo Icon 3D Hover

  A 3D animated card component with a rotating cube icon and smooth text fill effect that triggers on hover.

• Slarivo FlipCard

  An interactive card component that flips on hover with smooth 3D transitions. ## Features - 🔄 Horizontal and vertical flip animations through "flipDirection" prop (set "horizontal" by default) - ⌨️ Keyboard accessible - 🎯 TypeScript support - ♿ ARIA compliant - 🎨 Customizable styles - 🚫 Disabled state support

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

  Here is Buttons Components

• Slarivo Pricing Card

  An animated pricing card with interactive hover effects.

• Slarivo Quick Tooltip Actions

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

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

  An animated navigation menu with shifting content. Hovering or clicking on a dropdown smoothly reveals its content with motion transitions.

• Slarivo Phone Mockups 1

  An auto-rotating iPhone mockup carousel that showcases app screenshots inside a realistic phone frame with previous, next and pause controls.

• Slarivo Animated Dropdown

  A dropdown menu with smooth expand/collapse animations and click-outside handling.

• Slarivo Button

  A reusable component for button

• Slarivo Combobox

  Here is Combobox component

• Slarivo Smooth Dropdown

  A dropdown menu with smooth spring animations.

• Slarivo Toast

  Here is Toast component

• Slarivo Flip Card

  The Flip Card: Info + Login component is a versatile and interactive card that combines branding, guidance, and authentication in a single UI element. The front side can display a rich set of information—titles, descriptions, feature highlights, tips, and icons—allowing users to quickly understand the app’s value before logging in. The back side hosts a fully configurable login form with multiple fields and custom actions, while the success state provides immediate positive feedback upon login. With props for customizing content, fields, buttons, and illustrations, this component adapts to a wide range of use cases, maintaining a clean and modern design without relying on dark colors or excessive animations.

• Slarivo Comic Text

  Here is Comic Text

• Slarivo Alert Dialog Icon

  Here is Alert Dialog Icon component

• Slarivo NotificationsWithActions

  This Notifications with Actions component, a standard notification popover by adding interactive controls for each notification. A GripVertical icon on the right allows users to reveal contextual actions — specifically Archive and Delete buttons — which animate into view by slightly shifting the text content to the left. To enhance usability, a dedicated ChevronLeft icon appears alongside these actions, letting users easily close the action menu and return the notification item to its normal state. The component is fully reusable, supports popover placement customization, and uses Framer Motion for smooth transitions.

• Slarivo Scheduler

  This Scheduler component is a modern and interactive date and time picker built entirely with shadcn/ui. It provides a clean interface where users can schedule events by selecting a date from the calendar and choosing a time using dropdowns for hours and minutes. The scheduling interface is neatly wrapped inside a popover, making the component compact and easy to use without cluttering the page. Events are displayed in a structured card layout with options to edit or delete, ensuring flexibility and control over the schedule. By combining the Calendar, Select, Popover, and Card components from shadcn, this scheduler delivers a unique and user-friendly experience that goes beyond the typical date picker — making it well-suited for dashboards, task managers, booking systems, or productivity tools.

• 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 Pop Button

  A playful 3D-style button with push-down animation effect.

• Slarivo Calendar date and time picker

  here is calendar by shadcn with date and time picker

• Slarivo Accordion

  A fluid accordion with spring animations, collapsible sections, proximity hover effects in grouped mode, and smooth content transitions. Built on Radix UI with Framer Motion.

• 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 Calendar Date Picker

  Here is shadcn calendar with date picker

• Slarivo Special Card

  Here is Special Card component

• Slarivo Avatar Notifications

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

• Slarivo Heatmap Calendar

  The Heatmap Calendar component is a visually intuitive way to track daily activity using Shadcn UI components. Each day of the current month is displayed as a block whose color intensity reflects the number of events scheduled, allowing users to quickly gauge activity at a glance. Clicking or hovering on a day opens a Popover showing all events for that day, with each event displayed inside a Card. Users can add new events via an input field and button, and each event can be removed using the Lucide Trash2 icon. The design is clean, responsive, and works seamlessly in both light and dark themes, providing a simplified, month-focused view without extra or overlapping dates.

• Slarivo Animated Form

  Here is Animated Form component

• Slarivo Tooltip

  Here is tooltip component

• Slarivo Calendar day picker

  Here is shadcn calendar component with day picker

• Slarivo Tour Popover

  This Tour Popover component delivers a professional, guided onboarding flow using shadcn/ui’s Popover, Button, Progress, and Separator components. Each step is presented inside a compact popover with a clear icon, title, and description, making the information easy to follow without overwhelming the user. A progress bar at the bottom visually tracks how far along the tour the user is, while navigation controls (Back, Next, Restart) provide a smooth and intuitive way to move through the steps. By using professional Lucide icons like Home, Settings, HelpCircle, and Keyboard, the tour feels polished and business-ready, making it ideal for SaaS dashboards, admin panels, or any app where structured onboarding and contextual guidance are important.

• Slarivo Default

  Here is according default component

• Slarivo Calendar with little-date

  Here is Shadcn Calendar component with little-day

• Slarivo Rounded Box

  Here is Rounded Box component

• Slarivo Login Card

  Here is Login Card component

• Slarivo ChronoSelect

  The ChronoSelect component is a modern, shadcn-inspired date selection tool that combines accessibility, flexibility, and a clean design. Unlike traditional date pickers, ChronoSelect includes a built-in year selector alongside the calendar view, allowing users to jump across decades without tedious navigation. Its interface uses shadcn primitives like Popover, Select, and Calendar to ensure consistency across your UI, while providing customization options such as adjustable year ranges and placeholder text. With pill-shaped interactions, smooth transitions, and responsive layout, ChronoSelect feels both elegant and practical—ideal for forms, dashboards, booking systems, or any application where quick and intuitive date selection is essential.

• Slarivo Button

  Here is simple modern animated hover button component

• Slarivo Box Carousel

  Here is Box Carousel component

• Slarivo Accordion Space

  Here is Accordion component

• Slarivo Dot Particles

  Here is Dot Particles component

• Slarivo Contemt Tooltip

  Here is content tooltip component

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

  Here is Accordion component

• Slarivo Accordion

  A reusable and responsive accordion template

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo ComboBox

  A filterable select field that lets people search, choose, and enter values from a popover list.

• Slarivo AI Citation

  Inline citation pill that opens an origin-aware source card anchored to the pill you clicked, instead of a floating popover. Respects prefers-reduced-motion.

• Slarivo Popover

  An accessible popover panel anchored to a trigger button, with title, description, and optional compact tooltip styling, built on Base UI.

• Slarivo Dropdown Menu Sides & Alignment

  A dropdown menu that demonstrates aligning the popup to the start or end of its trigger and opening it to the side.

• Slarivo Workspaces

  a flexible, context-based solution to manage and display multiple workspaces in your app. It uses Radix Popover, supports avatars, search, and customizable rendering—perfect for SaaS dashboards with multi-tenant support.

• Slarivo Hover Card

  For sighted users to preview content available behind a link.

• Slarivo Hover Card

  For sighted users to preview content available behind a link.

• Slarivo Combobox

  Here is Combobox component

• Slarivo HeroUI Color Picker

  HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with…

• Slarivo HeroUI Color Picker

  HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with…

• Slarivo HeroUI Color Picker

  HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with…

• Slarivo Hover Card

  A Hover Card component for explaining controls and compact details on hover or focus, featuring hover card, hover-card, link preview, link-preview.

• Slarivo Combobox

  A Combobox component for choosing one or more values from a structured option set, featuring combobox, multi select, multi-select, multiselect.

• Slarivo Popover

  A neobrutalist popover — a floating panel anchored to a trigger for titles, descriptions, and inline forms, built on Base UI with thick borders and hard shadows.

• Slarivo Combobox

  A searchable dropdown select that lets users filter and pick one option from a list, built on a popover and command palette.

• Slarivo Advanced Data Table Filter Builder

  Build responsive data-table filters with AND/OR logic, multi-select values, searchable popovers, live results, and polished light/dark themes.

• Slarivo Model Picker

  A Model Picker component for AI conversations, reasoning states, tool activity, and assistant workflows, featuring ai, chat, popover, select.

• Slarivo Button Group Popover

  A button group with a chevron trigger that opens a popover form for describing a task, useful for a "Copilot"-style split action button.

• Slarivo Date Picker Disabled

  A date picker button with calendar popover shown in its disabled state, for read-only or locked date fields in a form.