SLARIVO / DOCKS

Docks Components

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

• Slarivo Dock Nav

  An Apple-style dock navigation bar with animated expanding icons and labels that appear on hover.

• Slarivo Navigation menu

  A collection of links for navigating websites.

• Slarivo Floating Dock Navigation

  Floating Dock Navigation

• Slarivo Floating Dock

  A macOS-style dock navigation where icons magnify on hover, with a separate collapsible menu on mobile.

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

  Display the current page location within a navigational hierarchy.

• Slarivo Dock

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

• Slarivo Dorpdown Navigation

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

• Slarivo Sidebar 1

  A searchable component navigation sidebar with grouped, scrollable sections and item counts.

• Slarivo dock

  Here is dock component

• Slarivo Button

  Enhanced shadcn/ui button

• Slarivo Tubelight Navbar

  A sleek and modern navigation bar component with smooth animations and a dynamic indicator. Perfect for primary navigation in web applications. Features - Animated tab indicator with glowing effect - Responsive design (mobile & desktop views) - Icons for mobile view, text for desktop - Dark/Light theme support - Frosted glass effect for active state - Smooth transitions between tabs - Built with Framer Motion for fluid animations

• 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 Navbar with Dropdowns

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

• Slarivo Header

  Header with shadcn navigation menu and buttons

• Slarivo Liquid Glass

  A liquid glass effect with a dynamic background feat. MacOS Dock Icons.

• Slarivo Floating Navbar

  A sticky Navbar that hides on scroll, reveals when scrolled up.

• Slarivo Header 3

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

• Slarivo Navbar 1

  Floating animated and responsive navbar component

• 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 Mini Navbar

  Minimalist 'Mini Navbar' Responsive UI component featuring subtle animations for top web page headers and navigation.

• Slarivo Anime Navbar

  The AnimeNavBar is a responsive, animated navigation bar built with React, Framer Motion, and Tailwind CSS. It supports hover effects, active state highlighting, and animations for both desktop and mobile views, creating an engaging and visually appealing user experience.

• Slarivo Dock

  Cool Animated Dock

• Slarivo Carousel

  A flexible and easy-to-use carousel with customizable navigation and indicators.

• Slarivo Nav Header

  This is a modern, interactive navigation header component built with React, TypeScript, and Framer Motion. Here's a breakdown of its functionality and design: 1. **Main Features**: - An animated navigation menu with a sliding cursor effect - Hover interactions that move a black background pill behind menu items - Mix-blend-difference effect that makes text appear white over the black background - Responsive design with different sizes for mobile/desktop - Rounded pill-style container with a border 2. **Component Structure**: - `Header`: The main component that manages position state - `Tab`: A subcomponent for individual menu items - `Cursor`: An animated motion component that slides behind the active tab 3. **Technical Implementation**: - Uses Framer Motion for smooth animations - Implements mouse event handlers for interactive effects - Uses refs to measure and position elements - Responsive styling with Tailwind CSS - Client-side component (marked with "use client")

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

  An authentic, responsive React dock component that replicates the macOS dock experience with smooth magnification effects, GSAP animations, and real macOS-style interactions. Perfect for portfolios and desktop-style applications.

• 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 Cursor Wander Card

  A modern, interactive crypto card component that responds to cursor movement, creating a subtle 3D tilt effect. Ideal for fintech and Web3 dashboards, this reusable UI card enhances user experience with smooth motion and futuristic design. Built using Tailwind CSS and React for easy integration.

• Slarivo Docks

  This minimal and responsive theme toggle component lets users effortlessly switch between Light and Dark modes while offering quick access to settings. Designed with accessibility and clarity in mind, it features clean icons, smooth interactions, and full keyboard support. Perfect for dashboards, web apps, or portfolios, it enhances user experience and gives instant control over personalization. Built with React and TailwindCSS, it's easy to integrate, style, and extend as needed.

• Slarivo Globe Interactive

  A WebGL globe with clickable markers that expand to show user counts. Click markers to toggle detail panels.

• Slarivo Scroll Navigation Menu

  Scroll to see the navbar transform into a floating hamburger menu

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

  This 3D Tilted Dock with Depth Layers is a futuristic UI component that makes a simple dock feel alive and immersive. The dock sits on a slightly tilted glass-like stage, creating the illusion of depth. Each icon responds dynamically: when hovered, it floats closer with a smooth tilt, while inactive icons gently fade into the background. A subtle parallax effect makes the entire dock shift in response to mouse movement, giving it a cinematic and interactive feel. Designed with a morphic glass background, it adapts seamlessly to both dark and light themes, while labels appear elegantly without breaking the layout. This unique combination of tilt, depth, and parallax transforms the dock into a visually striking and engaging centerpiece for modern web interfaces.

• Slarivo Magnetic Dock

  A fluid, interactive icon dock that “magnetically” expands icons as the cursor approaches, built with React and Framer Motion for smooth, springy hover effects.

• Slarivo Glassmorphism Navigation

  Glassmorphism Navigation

• Slarivo BeUI Expanable Action Bar

  Docks component from the 21st.dev community.

• Slarivo Toolbar Dock

  React menu component- a Vercel-style floating icon dock with a single tooltip rail that slides and clip-path reveals each label above the hovered button.

• Slarivo Agent Dock

  A compact control surface for switching between voice, chat, and lightweight agent states without pulling focus from the current screen. The dark dock shows an agent avatar, name, and an animated status line, with Voice and Chat actions (keyboard hints). Clicking Chat expands an inline composer that springs open; submitting a message flips the status to a working state. Built with motion/react, it animates height and status crossfades and respects reduced-motion preferences.

• Slarivo Sidebar

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

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Dialog

  Enhanced shadcn/ui dialog

• Slarivo Navbar Menu

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

• Slarivo Sidebar

  Sidebar

• Slarivo Sidebar

  A hover sidebar, inspired by Supabase's sidebar.

• Slarivo Wireframe Dotted Globe

  interactive 3D globe that allows you to rotate and zoom in on Earth with intuitive mouse controls

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

  An implementation of the MacOS dock using react + tailwindcss + framer motion

• Slarivo Dock

  Elegant and minimal dock

• Slarivo Animated Dock

  A dock with animated icons that grow on hover.

• Slarivo Dock Tabs

  The component includes 10 sample app icons with different colors and uses Lucide React icons. You can easily customize the dock items, colors, and animation parameters to match your needs.

• 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 Social Icons

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

• Slarivo Minimal Dock

  This component renders a modern, animated dock with icon tooltips and a reflection effect, inspired by macOS.

• Slarivo DockMorph

  This DockMorph component is a modern, customizable navigation bar inspired by macOS but redesigned with a futuristic, morphic-glass aesthetic. It stays fixed to the screen — at the bottom, top, or left — even while scrolling, ensuring constant accessibility. Each icon is interactive, with smooth scaling and a morphic glass bubble that expands behind the hovered item, creating an organic, fluid effect. Tooltips provide quick context, and the design automatically adapts to both dark and light themes using Tailwind’s utility classes. Its versatility makes it suitable for dashboards, productivity apps, or creative websites where you want a unique, always-visible navigation experience that feels sleek, interactive, and visually engaging.

• Slarivo Spotlight Button

  A modern and minimal bottom navigation bar with smooth spotlight effects on hover. Simple icons and subtle motion give it a polished feel that's perfect for clean UI designs.

• Slarivo Expanding Search Dock

  Minimal search icon that expands into full input with blur

• Slarivo Dock

  Here is Dock component

• Slarivo Social Links

  A fully responsive and theme-aware social media links component that displays a vertical sidebar on desktop and a floating expandable dock on mobile. Each link is styled with platform-specific gradients and consistent white icons for both light and dark themes. The floating dock includes an interactive toggle button that adapts its icon color based on theme mode.

• Slarivo Bottom Menu

  An animated bottom navigation menu with smooth transitions.

• Slarivo Gooey Dock

  This Dock component is a modern, interactive navigation bar inspired by the macOS-style dock, built with React, Framer Motion, and shadcn/ui. It displays a row of circular icon buttons, each wrapped in a tooltip for clear labeling. The highlight of the component is the gooey liquid background effect: when a user hovers over an icon, a softly animated blob expands behind it, creating a smooth, fluid-like motion. Framer Motion handles the scaling and spring-based animations, making the hover transitions feel natural and responsive. To maintain clarity, only the background blobs are passed through an SVG goo filter, while the icons themselves remain crisp and sharp. This ensures a visually playful yet professional design that can be used for app shortcuts, quick actions, or feature navigation in dashboards. Overall, the component balances aesthetic depth with practical usability, giving users both an engaging interaction and a clear navigation experience.

• Slarivo Apple Dock

  Here is apple dock component

• Slarivo Magnetic Dock

  This Magnetic Dock component is a modern, interactive navigation dock designed with shadcn/ui, Framer Motion, and Lucide icons. It provides a smooth, playful magnetic effect, where nearby icons subtly shift as you hover, creating an elastic, physics-based interaction. The dock has a glassmorphic card background with blur and soft borders, making it look sleek in both light and dark themes. It is responsive to placement, allowing you to pin it to the bottom, top, or left of the screen, and it remains fixed even while scrolling. With its balance of clean spacing, elegant hover animations, and theme adaptability, this component feels futuristic yet professional, perfect for modern web dashboards or application layouts.

• Slarivo MacOS dock

  MacOS dock smooth animation you can use

• Slarivo Dynamic Action

  Here is dynamic action bar component

• Slarivo Dock

  Navigation Menus component from the 21st.dev community.

• Slarivo Magnetic Dock

  A macOS-style dock with magnetic hover scaling, spring physics, tooltips, badges, and active indicators for navigation bars.

• Slarivo BeUI Expandable Tabs

  Navigation Menus component from the 21st.dev community.

• Slarivo Magnetic Dock

  A macOS-style dock where icons swell and neighbours yield to the cursor on a real magnetic falloff — keyboard navigable, with tooltips and an idle wave.

• Slarivo Techstack

  A tilted, overlapping row of app icons that swells under the pointer, opens up to make room, and shares one tooltip that glides between them. Driven by pointer position, not hit-testing, so it never flickers.

• Slarivo macOS Dock

  macOS-style magnifying dock: cursor distance drives a raised-cosine size wave across the icons, the hovered tool gets a hairline tooltip, a click bounces the icon off the tray floor, running apps keep a dot underneath, and a Cmd-K slot at the end opens a…