SLARIVO / MENUS

Menus Components

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

• Slarivo Menubar

  A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

• Slarivo Context Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Menubar

  A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

• Slarivo Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Bottom menu

  original by @raunofreiberg icons by @nucleoicons

• Slarivo Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo App Menu Bar

  The AppMenuBar component is a versatile, fully-featured navigation menu designed for modern web applications. It combines a clean, horizontal menubar layout with intuitive nested menus, allowing users to easily access projects, teams, calendar events, notifications, and files. Each menu item is enhanced with clear Lucide icons, and nested submenus are implemented using MenubarSub, ensuring that hover interactions are smooth and the parent menu stays open when navigating into submenus. The component supports multiple levels of navigation without closing unexpectedly, maintains consistent spacing between icons and text, and leverages subtle hover effects for better visual feedback. Its modular structure makes it highly customizable, making it ideal for dashboards, admin panels, or collaborative tools where organized and accessible

• Slarivo Dock

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

• Slarivo Menu

  Account Menu – Manage with ease. Quick access to orders, reviews, addresses, favorites, and settings in one place.

• Slarivo Menu

  A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.

• Slarivo Command

  Fast, composable, unstyled command menu for React.

• Slarivo Navbar

  Navbar with hover animation effect

• Slarivo Menubar

  A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

• Slarivo Menubar

  A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

• Slarivo Slide Tabs

  Slide Tabs, Menu Nav

• Slarivo Notifications Menu

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

• Slarivo Floating Action Panel

  A versatile floating action panel component with support for multiple triggers and modes. Features: • Multiple trigger buttons with different modes • Smooth animations using Framer Motion • Backdrop blur effect • Keyboard navigation and accessibility • Dark mode support • Responsive design • Form handling for note-taking • TypeScript support Notes: • Built with Framer Motion for smooth animations • Uses Lucide React for consistent iconography • Supports multiple panel modes (actions and notes) • Includes keyboard navigation (Escape key to close) • Click outside the panel to close • Fully typed with TypeScript • Customizable styling using Tailwind CSS • Mobile-friendly design

• Slarivo Profile Dropdown

  A profile dropdown for Users.

• Slarivo Hover Gradient NavBar

  ChatGPT said: This MenuBar component is a modern, animated bottom navigation bar built with React, Tailwind CSS, Framer Motion, and Lucide icons. It stays fixed at the bottom of the screen, adapts its width to fit the menu items, and features a subtle 3D flip animation with glow effects on hover. With rounded corners, a glassmorphic blurred background, and smooth transitions, it provides a sleek, floating dock-style navigation experience.

• Slarivo Curved Menu

  A modern React navigation component with an animated curved sidebar, interactive menu items, and social media footer. with smooth animations

• Slarivo Radial Menu

  A circular context menu built with Base UI, displaying actions in a clean radial layout with full keyboard support and smooth interaction.

• Slarivo Basic Dropdown

  Here is Basic Dropdown component

• Slarivo Context Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Context Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Menu Hover Effects

  Menu Hover Effects

• Slarivo Animated Menu

  Animated Menu bar with test transitions on hover easy transitions .

• Slarivo MacOS Menu Bar

  Menus component from the 21st.dev community.

• Slarivo Vertical Tabs

  Vertical tab navigation with smooth animated transitions.

• Slarivo Radix Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

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

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

• Slarivo Flower menu

  Here is modern minimalistic flower menu component

• Slarivo Radial Social Menu

  Radial Social Menu

• Slarivo Smooth Dropdown

  A dropdown menu with smooth spring animations.

• Slarivo Account Menu

  The AccountMenu component is a modern, user-friendly dropdown menu designed for managing user account actions and preferences in a web application. It provides a clean interface with icons and labels, allowing users to easily navigate to their dashboard, profile settings, team spaces, and notifications. The menu supports nested submenus, radio groups, and checkbox items, enabling users to select themes, notification preferences, and other personalized settings. With proper alignment of icons and text, and checkmarks positioned on the right, the AccountMenu ensures a visually appealing, intuitive, and responsive experience, making it ideal for dashboards and account management panels.

• Slarivo Dropdown Menu

  A versatile dropdown menu component with animations, multiple variants, and full accessibility support.

• Slarivo Dropdown Menu

  A dropdown menu of actions triggered by a button, built on Base UI primitives.

• Slarivo Menu

  This is Basic menu

• Slarivo Menu

  A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.

• Slarivo Menu

  A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.

• Slarivo Menu

  A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.

• Slarivo Menu

  A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.

• Slarivo Menu

  A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.

• Slarivo CommandPalette

  A modern, keyboard-first navigation UI that allows users to search and execute various commands through a floating interface. Supports keyboard shortcuts, search functionality, and customizable command groups.

• Slarivo 8bit Main Menu

  An 8-bit styled game main menu block built on the retro card and button primitives. Renders a titled menu card (Main Menu / Retro 8-bit Quest) with a vertical stack of pixel-font action buttons: Start Game, Options, High Scores, Multiplayer, and Quit.

• Slarivo Context Menu

  Here is Context Menu component

• Slarivo Menubar

  Here is Menubar component

• Slarivo Menu

  Here is Menu component

• Slarivo Menu

  Here is Menu component

• Slarivo Menu

  Here is Menu component

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Sidebar

  Expandable sidebar that expands on hover, mobile responsive and dark mode support

• Slarivo Navigation menu

  A collection of links for navigating websites.

• Slarivo Expandable Tabs

  A set of expandable tabs that show both icon and text when selected. Tabs animate smoothly to expand or collapse on click, and clicking outside collapses any open tab. Features - Animated Expansion: Smooth animations when revealing tab labels - Space Efficient: Collapses to icons-only when not in use - Click Outside: Automatically collapses when clicking outside - Separator Support: Optional separators between tab groups - Customizable: Supports custom colors and styling - Shadcn/UI Theme: Fully integrated with shadcn/ui theming system - Dark Mode: Built-in dark mode support - Accessible: Keyboard navigation and screen reader friendly Example Use Cases - Navigation Menus: Compact sidebar navigation - Toolbars: Feature-rich toolbars that save space - Mobile Interfaces: Touch-friendly navigation - Settings Panels: Grouped settings controls - Dashboard Controls: Quick access to main features

• Slarivo Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Navbar with Dropdowns

  A classic shadcn style navbar with dropdowns and mobile slide in menu.

• Slarivo Menu Toggle Icon

  Animated menu toggle icon morphing smoothly between hamburger and close states.

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Dropdown Menu

  Enhanced shadcn/ui dropdown menu

• Slarivo Navbar Menu

  A navbar menu that animates its children on hover, makes a beautiful bignav

• Slarivo Sidebar

  Sidebar

• Slarivo Navigation Menu

  Upgrade your project with a sleek React + Tailwind CSS Navigation Menu featuring a modern desktop mega menu and a smooth mobile drawer. Perfect for SaaS dashboards, landing pages, and websites that need a professional, multi-level navigation experience.

• Slarivo Modern Mobile Menu

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

• Slarivo Interactive Bento Gallery

  Interactive Bento Gallery

• Slarivo Glow menu

  Glow menu 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 Floating Action Menu

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

• Slarivo Dropdowm Menu

  Dropdown menu component with framer motion and tailwind css.

• Slarivo Sterling Gate: Kinetic Navigation

  An authoritative full-screen navigation component designed for high-end digital experiences. This menu utilizes a "Reveal" logic—where the interface transitions from a focused view to an immersive, typography-heavy navigation layer. Inspired by the "Silver" Paya and "Jalchar" (Water) elements, the transitions are fluid and heavy-weighted, providing a tactile sense of depth. It features interactive hover states that "ripple" across the menu items, perfect for agencies and luxury brands that prioritize a "Quiet Luxury" aesthetic.

• Slarivo Footer 2

  A footer with a logo, tagline and multiple menus

• Slarivo User Dropdown

  A comprehensive user profile dropdown menu with avatar trigger, status management, and organized navigation sections. Features dark/light mode support, customizable user data, and grouped menu items for profile settings, premium features, support resources, and account management. Built with React, Tailwind CSS, and Iconify icons. Key Features: Avatar-triggered dropdown with user info display Status indicator with update submenu (Online, Focus, Offline) Organized menu sections (Profile, Premium, Support, Account) Full dark/light theme compatibility Configurable props for user data and event handlers Modern UI with icons, badges, and responsive design Perfect for SaaS platforms, dashboards, and applications requiring professional user account management interfaces.

• Slarivo Gradient Menu

  Gradient Menu: Button Icon Hover Effects with Text And Gradient Drop Shadow

• Slarivo Dorpdown Navigation

  A dynamic and interactive multi-level navigation menu with dropdown submenus and hover effects.

• Slarivo Navbars

  Here is Navbars component

• Slarivo Fluid menu

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

• Slarivo Mega Menu

  Here is vercel styled menu component

• Slarivo Dropdown Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Menu

  Here is Context Menu component

• Slarivo Menu

  Here is Context Menu component

• Slarivo Menu

  Here is Context Menu component

• Slarivo Menu

  Here is Context Menu component

• Slarivo Menu

  Here is Context Menu component

• Slarivo Context Menu

  here is indevui context menu demo

• Slarivo Context Menu

  Here is Context Menu component

• Slarivo Context Menu

  Here is Context Menu component

• Slarivo New Context Menu

  This is context menu

• Slarivo Reshaped Context menu

  Root wrapper whose children receive a right-click handler to open an overlaying menu. Exposes compound components for menu items, item sections and nested sub-menus with automatic focus trapping, supports DropdownMenu positioning properties and automatically fits into the viewport.

• Slarivo Reshaped Context menu

  Root wrapper whose children receive a right-click handler to open an overlaying menu. Exposes compound components for menu items, item sections and nested sub-menus with automatic focus trapping, supports DropdownMenu positioning properties and automatically fits into the viewport.

• Slarivo Command Menu

  A pill that grows into a command panel on hover, tap or Cmd+K: a highlight that slides between items and even diagonally into the theme row, a rotating status line, arrow/j-k navigation, Escape and click-outside. Inspired by Colin Lienard's personal site (colinlienard.com), rebuilt for React from scratch.

• Slarivo Menu Icon

  Animated hamburger menu icon that morphs its three lines into a close (X) shape on interaction.

• Slarivo Context Menu Social Feed

  Social feed cards with a right-click context menu to upvote, downvote, reply, and report posts with a nested report submenu.

• Slarivo Navigation Menu

  Here is Navigation Menu component

• Slarivo Menu Toggle

  a sleek animated toggle button (like a hamburger menu) built with SVG. It smoothly transitions between open and closed states with a fun rotation and line morph effect—perfect for modern navbars!

• Slarivo Menubar

  A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

• Slarivo Menu Vertical

  Here is Menu Vertical component

• Slarivo Popover

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

• Slarivo Context Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Navigation Menu

  A collection of links for navigating websites.

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

  A circular navigation menu that expands items in a circle around a central button with smooth animations and hover effects.

• Slarivo Header 05

  Header like apple with menu and search

• Slarivo Profile Dropdown

  Here is profile dropdown component

• Slarivo Material UI Dropdown Menu

  A highly sophisticated Material Design 3 Dropdown Menu built on top of shadcn/ui and Radix UI. Engineered with a custom Dual-Physics Ripple Engine via the Web Animations API for true geometric haptic-like feedback. Features a seamless drill-down navigation system with smooth, dynamic height adjustments using ResizeObserver. Includes SSR-compatible cinematic sweep & staggered entry animations driven by local CSS variables. Fully WCAG compliant, keyboard navigable, and perfectly bundled as a zero-dependency, single-file portable component.

• Slarivo RuixenMenuOptions

  This RuixenMenuOptions component is a visually rich and user-friendly dropdown menu built using the ShadCN UI library and Lucide icons. It offers grouped actions like quick edits (rename, clone), organization options (move, pin, share), and settings, along with a clearly marked destructive action ("Delete Forever") styled in red for caution. The menu is neatly structured using submenus, separators, and keyboard shortcuts, making it ideal for applications requiring a compact, accessible action panel for managing items.

• Slarivo Navigation Menu

  A navigation menu component with keyboard navigation and accessibility features.

• Slarivo Animated Menu

  A React component featuring an animated menu with Rive icons, inspired by @guerriero_se's UI experiment.

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

  A list of actions in a dropdown, enhanced with keyboard navigation. Built on top of Base UI Menu component with shadcn styling.

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Animated Menu

  A reusable component for animated menu

• Slarivo Animated Dropdown

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

• Slarivo Bottom Menu

  An animated bottom navigation menu with smooth transitions.

• Slarivo Cicular Navigation Bar

  Here is circular navigation bar component

• Slarivo Menu

  A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.

• Slarivo Menubar

  A horizontal menu bar component for navigation and actions.

• Slarivo Menubar

  Here is Menubar component

• Slarivo Menu

  Here is Menu component

• Slarivo Dynamic Action

  Here is dynamic action bar component

• Slarivo Context Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Navigation Menu

  Here is Navigation Menu component

• Slarivo Menu

  Here is Context Menu component

• Slarivo HeroUI Dropdown

  Accessible dropdown menu built on React Aria, from HeroUI v3. A trigger-anchored popover menu supporting plain actions, leading icons, descriptions, keyboard shortcuts (Kbd), grouped sections with headers and separators, disabled items, single and multiple selection with check indicators, a controlled selected state, a danger/destructive variant, and a custom avatar trigger. Full keyboard navigation, typeahead, and focus management. Compound API: Dropdown / Dropdown.Trigger / Dropdown.Popover / Dropdown.Menu / Dropdown.Item / Dropdown.Section / Dropdown.ItemIndicator + Label / Header / Description / Separator / Kbd / Avatar.

• Slarivo Liquid Morph Floating Menu

  A premium, interactive floating navigation pill that dynamically expands into a dark-themed menu with smooth organic transitions, a morphing toggle button, and staggered letter-roll hover effects.

• Slarivo Context Menu

  A right-click (or long-press) context menu with items, checkboxes, radio groups, nested submenus, keyboard shortcuts, and destructive actions.

• Slarivo Menu Animations

  Here is Menu Animations

• Slarivo Context Menu

  Displays a menu to the user — such as a set of actions or functions — triggered by a button.

• Slarivo Dropdown Menu

  Here is Dropdown Menu component

• Slarivo User Context Menu

  The ActionToolbar component is a clean and functional UI element designed to provide users with easy access to common actions. Featuring a simple layout with plain background colors, clear spacing between icons and labels, and smooth hover effects, it ensures both clarity and usability. Each button in the toolbar includes an icon paired with descriptive text, improving recognition and accessibility for users. This component is ideal for dashboards, control panels, and productivity tools where quick access to key functions is essential. Its minimalist design keeps the interface organized, professional, and visually balanced across different screen sizes.

• Slarivo Reshaped Dropdown menu

  Compound components for any menu composition: a Trigger that passes required attributes to your component, an overlaying Content with menu items based on MenuItem, item Sections, and nested SubMenus with automatic focus trapping. Supports Popover positioning with viewport-aware fallbacks.

• Slarivo Reshaped Menu item

  Building block for menus and navigation that renders its main area from children and works with both href and onClick. Supports critical and neutral colors, selected and disabled states, three sizes, startSlot/endSlot composition, built-in icon support and a MenuItem.Aligner utility for aligning with surrounding text.

• Slarivo Animated Sidebar

  Animated vertical sidebar navigation with a spring hover highlight, an animated active indicator bar, collapsible groups, per-item dash accents, and drag-to-resize.

• Slarivo Gooey Actions

  A floating action button whose children separate out of the trigger like liquid metal, using an SVG goo filter.

• Slarivo Dropdown

  An accessible listbox dropdown with a highlight that travels between options, full keyboard navigation, and typeahead search.

• Slarivo indevuiDropdownMenu

  Here is modern component of indevuiDropDown menu

• Slarivo Menu

  Here is Menu component

• Slarivo Menu

  Here is Menu component

• Slarivo Menu

  Here is Menu component

• Slarivo clipped-video-tab

  A cinematic clipped video section built with React, TailwindCSS, and Framer Motion for modern UI experiences.

• Slarivo Tab Navbar

  A responsive top navigation bar with a dropdown navigation menu, search input, and sign-in button.

• Slarivo Default Navigation Menu

  A horizontal navigation menu with a simple list of links for site-level navigation.

• Slarivo BeUI Create Menu

  Buttons component from the 21st.dev community.

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Interactive Hover Button

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

• Slarivo Animated AI Chat

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

• Slarivo Header 3

  Feature-rich responsive header with scroll blur, animated mobile drawer, and nested navigation menus.

• Slarivo Floating Header

  a sleek, sticky navigation bar that stays visible while you scroll, ensuring quick access to essential links. With a rounded glass-like design, mobile-friendly drawer menu, and smooth hover effects, it delivers a premium user experience. Perfect for landing pages, SaaS apps, or blogs, it combines elegance and usability in one compact component.

• Slarivo Interactive Icon Cloud

  An interactive 3D tag cloud component

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Background Components

  Here is Background Components component

• Slarivo Interactive Selector

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

• Slarivo Galaxy Interactive Hero Section

  A dynamic and visually engaging hero section featuring a Spline 3D background, a responsive navigation bar with blurred effects and dropdowns, a prominent content overlay with parallax scrolling text, buttons, and a follow-up screenshot section with parallax. Fully responsive and includes mobile navigation

• Slarivo Resizable Navbar

  Here is Resizable Navbar component

• Slarivo Animated Slideshow

  - Animated hover slider

• Slarivo AI Input

  AI Input popover

• Slarivo Dorpdown Navigation

  A dynamic and interactive multi-level navigation menu with dropdown submenus and hover effects.

• Slarivo Navbars

  Here is Navbars component

• Slarivo Navbars

  Here is Navbars component

• 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 Animated Card Diagram

  Here is Animated Card Diagram component

• Slarivo lumina-interactive-list

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

• Slarivo Dock

  This Dock component is a modern, glassmorphic navigation bar inspired by the elegance of macOS but with a unique twist. Instead of sitting flat, the dock is displayed with a slight 3D arc effect using perspective transforms, which makes the layout feel more dynamic and futuristic. Each icon is wrapped with shadcn/ui Buttons and Tooltips for accessibility and consistency, while Framer Motion adds natural hover animations. When you hover over an item, the icon subtly tilts, scales up, and gains a glowing border ring, creating a magnetic feel that draws the eye. Clicking an icon highlights it with a small glowing dot beneath, serving as a minimal but effective active state indicator. The combination of tilt, glow, blur, and arc design makes this component stand out as both functional and visually engaging, perfect for dashboards, apps, or landing pages where you want a unique, premium navigation experience.

• 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 Navigation Bar

  Here is Navigation Bar component

• Slarivo Navigation Bar

  Here is Navigation Bar component

• Slarivo Pie Chart

  Here is Pie Chart component

• Slarivo Category List

  An interactive and theme-adaptive list component used to display and navigate through different categories or features. Each item provides visual feedback on hover, revealing more details and an icon, making it ideal for guiding users through key sections of an application.

• 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 3D Adaptive Navigation Bar

  A stunning 3D navigation component with ultra-realistic depth, lighting, and material effects. Features: • Premium 3D design with photorealistic shadows and gradients • Smooth hover-to-expand interaction with staggered animations • Click-to-select behavior with automatic collapse • Elegant text transitions with subtle lighting pulses • Fully responsive and optimized for modern web apps • Built with React, TypeScript, and Framer Motion

• Slarivo Bottom Nav Bar

  A highly animated, touch-friendly mobile/navigation bar component for dashboard or finance applications. Built with Next.js, TypeScript, TailwindCSS v4, and Framer Motion, it delivers a visually appealing pill-style layout with seamless in-out label animation for active tabs. Each tab displays its icon and label only when active, with transition effects fully powered by responsive Tailwind utilities and Framer Motion—no inline styles. The component supports shadcn/ui theming, integrates accessibility best practices, and offers a sticky bottom mode via a single prop (stickyBottom). Designed and coded to meet 21st.dev's UI/UX and code standards, it’s ready for production integration, with dark theme support and easy configuration for icon and label sets.

• Slarivo Button

  Here is magic button component

• Slarivo Animated Comman Menu

  Animated Comman Menu

• Slarivo Tree

  Here is Tree component

• Slarivo Navigation Menu

  Here is animated Navigation Menu

• Slarivo Interactive Accordion

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

• 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 Member List

  Here is modern Member list by indev ui

• Slarivo SidebarShowcase

  This custom sidebar component is a fully responsive, interactive navigation panel built using ShadCN UI, Framer Motion, and React. It features a team switcher at the top, allowing users to quickly toggle between different teams using a dropdown menu. The sidebar is divided into categories such as “Main” and “Work,” where each category contains individual navigation items. The Work category supports collapsible sub-labels with smooth animations for nested items, while some items can remain as single links without dropdowns. Each navigation item can display a status badge (like “New,” “Updated,” or “Coming Soon”) to indicate priority or updates. At the bottom, the sidebar includes a user profile dropdown with options for profile management, settings, billing, and logout, fully leveraging ShadCN UI’s DropdownMenu. The component combines clean typography, muted default text, hover effects, and smooth motion animations, offering a polished and professional navigation experience suitable for modern web applications.

• Slarivo Toast

  Here is Toast component

• Slarivo Pricing Component

  Pricing Component with sleek design and better handling

• Slarivo Scroll Navigation Menu

  Scroll to see the navbar transform into a floating hamburger menu

• Slarivo Checkbox

  Here is modern minimalistic checkbox component

• Slarivo Interactive Hover Links

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

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo dropdown 01

  A reusable component for dropdown

• Slarivo Base Menu

  A list of actions in a dropdown, enhanced with keyboard navigation. Built on top of Base UI Menu component with shadcn styling.

• Slarivo Shifting Dropdown

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

• Slarivo Accordion Multi-level

  Here is accordion multi-level component

• Slarivo Dropdown

  Here is Dropdown component

• Slarivo Split Button

  A button that offers a primary interaction coupled with a dropdown menu offering additional actions.

• Slarivo Animated Menu Bar

  A modern, responsive menu bar React component featuring animated icon expansion, active state highlighting, and smooth transitions. Supports both dark and light themes out of the box using Tailwind CSS. On mobile, tooltips appear on tap for accessible navigation. Designed for clean code, accessibility, and seamless integration into any Next.js or React project.

• Slarivo Menu Item Card

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

• Slarivo Command Menu

  A command palette component with keyboard navigation, search, and shortcuts for quick actions and navigation.

• 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 Navigation Bar

  Here is navigation bar component

• Slarivo Manage Access Component

  Manage Access Component This component provides a complete UI for managing user access to a resource. It's built to be highly reusable, controlled by props for users, access levels, and callback functions.

• Slarivo Cuisine Selector Chips

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

• Slarivo Special Card

  Here is Special Card component

• Slarivo Nested Dashboard Menu

  This component is a nested menubar designed for complex dashboards, where each top-level menu (like Dashboard, Projects, Team, Tasks, Reports, Settings) can have submenus for additional options. It allows users to quickly access detailed sections without leaving the main navigation, keeping the interface organized, compact, and user-friendly. By using submenus, it supports multi-level navigation in a clean and intuitive way, making it ideal for admin panels or productivity apps.

• Slarivo Animated Staggered Dropdown

  This code implements a visually appealing and interactive dropdown component using animation libraries. It addresses the need for a more engaging user experience compared to a standard dropdown. The component displays a list of options when a button is clicked. The animation is achieved using the `motion` library from Framer Motion, providing a staggered, smooth opening and closing animation for each list item. The dropdown's functionality is built using React's useState hook to manage its open/closed state. The component utilizes React Icons for its icons, offering a customizable and visually consistent experience. The `wrapperVariants`, `iconVariants`, `itemVariants`, and `actionIconVariants` objects define the animation properties for the dropdown wrapper, chevron icon, list items, and action icons respectively, controlling the timing and appearance of animations. Each option is rendered as a separate list item within a motion.ul. Upon clicking an option, the dropdown closes, and the corresponding action could be triggered (though that logic is not included in this example; it would be added within the Option component). The component is highly customizable via props (though not demonstrated here). The example uses a set of predefined icons and options, but these can be easily replaced or extended. This component can be used in various applications where a visually appealing and interactive dropdown menu is needed, such as within a settings menu, a post-management interface, or any context menu where multiple actions are available.

• Slarivo Default

  Here is according default component

• Slarivo Menu

  A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported as DropdownMenu for compatibility.

• Slarivo Folder Interaction

  An animated folder with interactive open/close mechanics.

• Slarivo Folder Components

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

• Slarivo Interactive Folder Gallery

  A macOS-inspired folder that springs open on click, fanning out photo cards with realistic Framer Motion physics and drag-to-close interactions.

• Slarivo Icon Bar

  Icons component from the 21st.dev community.

• Slarivo Navbar

  Here is Navbar Component

• Slarivo Dropdown Menu

  Here is Dropdown Menu component

• Slarivo Menu

  Here is Menu component

• Slarivo Activity Dropdown

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

• Slarivo Action dropdown

  A click-driven action picker whose multi-level submenu opens beside the row, jumps straight to the selected item, and drills in place with an animated breadcrumb at a fixed width.

• Slarivo Reshaped Context menu

  Root wrapper whose children receive a right-click handler to open an overlaying menu. Exposes compound components for menu items, item sections and nested sub-menus with automatic focus trapping, supports DropdownMenu positioning properties and automatically fits into the viewport.

• Slarivo Drilldown Menu

  A list that drills into itself. The row you click stays put, fades to a grey breadcrumb with a return arrow, and its children arrive one indent deeper — no sliding panels.

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

  Glow Menu component Animated 3D Menu Bar with Theme Toggle This component is a modern interactive navigation menu built using Next.js, Framer Motion, and Next Themes. It combines smooth 3D animations, gradient glows, and a dynamic light/dark theme toggle for a visually engaging user experience. ⚙️ Key Features: Theme Toggle Switch Allows users to switch between light and dark modes. Smooth animated transitions for the Sun and Moon icons. Built using next-themes and a custom Switch component for elegant state handling. Animated 3D Navigation Menu Each menu item (Home, Notifications, Settings, Profile) has a flip animation powered by Framer Motion. Items animate with a 3D rotation effect when hovered, flipping between front and back labels. A soft radial glow appears on hover, matching the item’s color theme (blue, orange, green, red). Dynamic Gradient Glow The menu bar features a subtle hover-based background glow, adapting to the current theme. The glow uses a radial gradient effect for a premium, futuristic look. Responsive & Themed Design The component uses Tailwind CSS for styling. Automatically adjusts colors, text, and glow intensity depending on the theme (light or dark). The design remains minimal and clean while highlighting motion effects. 🧩 Tech Stack: React + Next.js Framer Motion for animations next-themes for theme management Tailwind CSS for styling Lucide Icons for vector icons 🖼️ Component Structure: ThemeToggle – Handles light/dark theme switching with animated icons. MenuBar – Displays a navigation bar with motion-based hover effects. Page – Wraps everything in a ThemeProvider and centers the UI on the screen. 🎬 Animation Highlights: Flip animation using rotateX transitions for 3D depth. Spring-based motion for natural responsiveness. Hover glows and perspective transforms for a glassy UI feel.

• Slarivo Split Button

  A button that offers a primary interaction coupled with a dropdown menu offering additional actions.

• Slarivo Chat Card

  A modern chat interface component that provides a complete messaging experience with reactions, status indicators, and theme support. Features - Message Display - Message history with timestamps - Read/delivered status indicators - User avatars and names - Message reactions with emoji - Message grouping by user - Interactive Elements - Message input with emoji picker - Send button with status feedback - Reaction system with counters - More options menu - Online status indicators - Visual Design - Light and dark theme support - Smooth transitions and animations - Clean and modern interface - Responsive layout - Accessible design

• Slarivo Browser

  The Browser component lets you showcase website screenshots or any other content within a realistic browser-style frame.

• Slarivo Input

  Prompt Input A comprehensive and visually polished chat input component. It features a dismissible credit banner, an action toolbar, and smooth animations for a premium user experience. The component is built with cva for variant support and framer-motion for animations.

• Slarivo Toolbar

  Here is Toolbar component

• Slarivo Trip Details Card

  Trip Details Card A reusable card component to display travel or booking information, featuring a header, details section, and a configurable action toolbar. It's designed with framer-motion for a subtle entry animation.

• Slarivo Toolbar

  A container for grouping a set of buttons and controls.

• Slarivo Toggle Group

  Here is Toggle Group component

• Slarivo Astryx Button Group

  Astryx (Meta) ButtonGroup — joins related actions into a single connected control: clipboard actions and a primary split save button.

• Slarivo Breadcrumb

  Accessible breadcrumb navigation with links, a current page, separators, and an ellipsis for collapsed paths.

• 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 Icon Button Actions

  Ghost ellipsis icon button that opens a compact dropdown menu of row actions like rename, duplicate, favorite, and a destructive delete.

• Slarivo Table Row Actions

  A data table with a per-row ellipsis dropdown menu exposing edit, copy, and remove actions.

• Slarivo Theme Switcher Dropdown

  A dropdown menu that toggles between light, dark, and system color themes using a radio group.

• Slarivo Command

  Fast, composable, unstyled command menu for React.

• Slarivo Command

  Fast, composable, unstyled command menu for React.

• Slarivo Base Button

  Here is Button component

• Slarivo Neo-Brutalist Kinetic Deck

  A physics-based interactive card system featuring free-form dragging, realistic 3D flips, and a custom context menu. Built with Framer Motion and Tailwind CSS, it uses spring physics to create a tactile, "heavy" feel perfect for retro-modern portfolios or…

• Slarivo Base Menu

  A list of actions in a dropdown, enhanced with keyboard navigation. Built on top of Base UI Menu component with shadcn styling.

• Slarivo Toggle Group

  A set of toggle buttons that work together as a single control, built on Base UI's ToggleGroup primitive. Supports single or multiple selection, horizontal and vertical orientation, default and outline variants with three sizes, and an optional…

• Slarivo Toggle Group

  A set of toggle buttons that work together as a single control, built on Base UI's ToggleGroup primitive. Supports single or multiple selection, horizontal and vertical orientation, default and outline variants with three sizes, and an optional…

• Slarivo Toolbar

  A container for grouping related actions into a single keyboard-navigable bar, built on Base UI's Toolbar primitive. Ships Toolbar, ToolbarButton, ToolbarLink, ToolbarInput, ToolbarGroup and ToolbarSeparator. Each part uses the render prop so it can…

• Slarivo Toolbar

  A container for grouping related actions into a single keyboard-navigable bar, built on Base UI's Toolbar primitive. Ships Toolbar, ToolbarButton, ToolbarLink, ToolbarInput, ToolbarGroup and ToolbarSeparator. Each part uses the render prop so it can…

• Slarivo Toggle Group

  A Toggle Group component for switching settings, modes, preferences, and binary states, featuring toggle group, toggle-group, toggle, button group.

• Slarivo Button Group

  A Button Group component for grouping contextual commands, destinations, and application actions, featuring button group, button-group, toolbar, icon button.

• Slarivo Button Group

  A Button Group component for calls to action, controls, and interactive commands, featuring button group, button-group, zoom, icon button.

• Slarivo One Clipboard

  A One Clipboard component for calls to action, controls, and interactive commands, featuring icon button, icon-button, toolbar, outline.

• Slarivo Toggle

  A two-state toggle button built on Base UI's Toggle primitive. Ships default and outline variants, three sizes (sm, default, lg), controlled or uncontrolled pressed state via pressed / defaultPressed, disabled styling, and springy pressed feedback. Works…

• Slarivo Astryx Toggle Button

  Astryx (Meta) ToggleButton — pressed/unpressed control with outline/solid icon swap: favorite, bookmark and notifications.

• Slarivo Labeled Grouped Dropdown Menu

  A dropdown menu with labeled groups of actions and a destructive delete item, triggered by an outline button.

• Slarivo Add Block Dropdown Menu

  A dropdown menu that lets users add a content block, listing options like text, quote, divider and headings each with an icon and description.

• Slarivo Help Dropdown Menu

  An icon-triggered dropdown menu with a labeled help section linking to documentation, support, and contact options.

• Slarivo Select (Radix UI)

  An animated compound select dropdown built on Radix UI primitives with trigger press feedback, chevron rotation, grouped rows, labels, scroll buttons, and smooth panel motion.

• Slarivo Menu

  Dropdown menu that displays a list of actions a user can trigger from a button, built on Base UI with a neobrutalist retro style.

• Slarivo Expand Menu

  An animated expanding menu that reveals action items from a trigger button, with configurable direction, layout, and alignment.

• Slarivo Card with Dropdown Menu

  A compact card with a title, body text and a footer action, plus a header dropdown menu for team/settings actions.

• Slarivo Outline Toggle Buttons

  Toggle buttons with an outline variant for toggling text formatting options like bold and italic.

• Slarivo Context Menu

  A right-click context menu with nested Arrange and Transform items, from the official Motion examples catalog.

• Slarivo Drill-down Submenu Dropdown

  An animated dropdown menu with drill-down nested submenus, search filtering, and directional slide transitions between panels.

• Slarivo User Profile Dropdown Menu

  A user profile dropdown menu with avatar, online status indicator, and grouped links for profile, subscription, settings, and sign out.

• Slarivo Dropdown (Radix UI)

  A compound dropdown menu with select and action variants, animated row highlight, checkbox and radio items, submenus, and a scrollable panel built on Radix primitives.

• Slarivo Sidebar Nav Group

  A collapsible sidebar navigation with grouped sections, sub-item links, and a chevron that rotates when a group expands.

• Slarivo Breadcrumb with Icons

  A breadcrumb navigation trail with a leading icon on each item to reinforce the section it points to.

• Slarivo Settings Sidebar Accordion

  A settings sidebar navigation built from an accordion, with icon-labeled sections that expand to reveal grouped links.

• Slarivo Multi-level Collapsible Menu

  A nested, multi-level collapsible navigation menu inside a card, with expandable folders, animated chevrons, and selectable items.

• Slarivo Button Group

  A segmented container that visually joins related action buttons (like copy, edit, delete, or a split-button menu trigger) into one bordered control for toolbars and menus.

• Slarivo Restaurant Menu Block

  A two-column restaurant menu section that lists dishes in courses with dotted leader lines connecting each dish name to its price, plus a description and dietary note.

• Slarivo Filter Token Bar

  Linear-style composable filter tokens (field · operator · value) with roving-tabindex keyboard navigation, async option loading, multi/single select, hand-drawn assignee avatars, and light/dark support.

• Slarivo Search Toolbar Page Header

  A list-view page header with a title, primary action button, and a toolbar of search input, status and sort filters, and a list/grid view toggle.

• Slarivo Expandable Action Bar

  A compact row of icon actions that expands into labeled controls on hover, focus, or tap, with a shared layout highlight and touch-friendly two-tap behavior.

• Slarivo Action Dropdown Button Group

  A split button group pairing a primary action button with an adjacent dropdown-trigger button that reveals related actions, complete with hover and open/close micro-animations.

• Slarivo HeroUI Button Group

  HeroUI v3 ButtonGroup — grouped buttons with separators, variants, sizes, orientation, icons and full-width layout.