SLARIVO / NAVIGATION MENUS

Navigation Menus Components

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

• Slarivo Navigation menu

  A collection of links for navigating websites.

• Slarivo Navbar Menu

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

• Slarivo Navigation Menu

  A collection of links for navigating websites.

• Slarivo Rich Navigation Menu

  A feature-rich navigation menu with multi-column dropdown panels, icons, and descriptions for building site headers.

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

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

• Slarivo Navigation Menu

  Here is animated Navigation Menu

• Slarivo Default Navigation Menu

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

• Slarivo Shop Navigation Menu

  An e-commerce navigation menu with dropdown panels for collections and accessories, featuring featured imagery, category icons, and quick links.

• Slarivo Dropdown Menu

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

• Slarivo Menu Toggle Icon

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

• Slarivo Header 1

  Responsive sticky header with scroll blur effect, animated mobile menu, and adaptive navigation links.

• Slarivo Carousel

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

• Slarivo Glow menu

  Glow menu component

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

  Shadcn Navbar with 2 column dropdown menus and mobile menu that slides in from the top with dropdowns

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

  Animated and responsive sidebar component with multiple categories section and mobile device support

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

  Here is Navigation Bar 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 Sidebar

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

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

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

• Slarivo Header 2

  Elegant responsive header with scroll-based styling, mobile drawer menu, and smooth transitions.

• Slarivo Header

  Header with shadcn navigation menu and buttons

• Slarivo Footer

  Footer

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Floating Navbar

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

• Slarivo Sidebar

  Sidebar

• Slarivo Header 3

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

• Slarivo Sidebar

  A hover sidebar, inspired by Supabase's sidebar.

• Slarivo Stacked Circular Footer

  Stacked Circular Footer Section

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

  Navigation, Header

• Slarivo Dock

  Cool Animated Dock

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Vercel Tabs

  Tabs in Vercel style

• Slarivo Carousel

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

• Slarivo Carousel

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

• Slarivo Modem Animated Footer

  A modern, fully customizable footer component with animated background text, social links, navigation menu, and a floating brand icon. Features smooth hover animations, responsive design, and dark mode support using shadcn's neutral color palette.

• Slarivo Resizable Navbar

  Here is Resizable Navbar component

• Slarivo Footer

  Footer

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

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

• Slarivo Command

  Enhanced shadcn/ui command

• Slarivo Footer Taped Design

  A minimalistic Responsive Footer Navigation with Active and Coming Soon Elements That can Be used now but also be prepped for the future.

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Breadcrumb

  Enchanced shadcn/ui breadcrumb

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Bottom menu

  original by @raunofreiberg icons by @nucleoicons

• Slarivo Footer

  Here is Footer component

• Slarivo Pagination

  Pagination with page navigation, next and previous links.

• Slarivo Pagination

  Pagination with page navigation, next and previous links.

• Slarivo Pagination

  Pagination with page navigation, next and previous links.

• Slarivo Pagination

  Pagination with page navigation, next and previous links.

• Slarivo Dorpdown Navigation

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

• Slarivo Navbars

  Here is Navbars component

• Slarivo Sticky Footer

  A modern, animated sticky footer with multi-column navigation, social media icons, Perfect for SaaS, fintech, startups, and business websites to enhance branding and user engagement.

• Slarivo Tabs in cell for navigation

  shadcn/ui tabs in cell for navigation

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

  An animated tab component built with Framer Motion's layoutId prop.

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

  Here is Menu Vertical 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 Vercel Navbar

  Vercel Navbar with navigation menu

• 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 Slide Tabs

  Slide Tabs, Menu Nav

• Slarivo Dock

  Elegant and minimal dock

• Slarivo Quick Links Card

  Quick Links Card

• Slarivo Tree

  Here is Tree component

• Slarivo Command Palette

  A versatile component inspired by Raycast, enabling global search across pages, content, and actions on your website. Perfect for enhancing navigation, productivity, and accessibility through quick commands and keyboard shortcuts.

• Slarivo Footer 2

  a modern website footer featuring multi-column navigation, social media icons, and App Store & Google Play buttons. Perfect for SaaS, eCommerce, or blogs, it adds credibility, easy navigation, and mobile app links in one elegant layout.

• Slarivo usePagination

  usePagination hook

• 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 Sticky Section Tabs

  A container component that displays child sections with sticky headers. As the user scrolls, the header for the current section sticks below a defined navigation height, providing clear context and navigation for long content pages.

• Slarivo Whatsapp Sidebar

  this is a replica of whatsapp desktops's sidebar

• Slarivo Minimal Dock

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

• Slarivo Pagination

  Enhanced shadcn/ui pagination

• Slarivo Pagination

  Enhanced shadcn/ui pagination

• Slarivo Menu Hover Effects

  Menu Hover Effects

• Slarivo Animated Menu

  Animated Menu bar with test transitions on hover easy transitions .

• Slarivo Animated Navigation Tabs

  A dynamic, animated navigation component with interactive tabs that dynamically highlight active and hover states.

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

  The footer of Chillbion’s website serves as a comprehensive navigation and contact hub, reinforcing the brand’s identity and professionalism. It includes key links to services and company pages, ensuring visitors can easily explore offerings like MVP development, AI solutions, and full-stack engineering. Contact information is clearly presented, including an email address, phone number, and office location in Dhaka, Bangladesh — building trust and accessibility. The footer design is clean and modern, with a tech-forward feel, aligned with Chillbion’s mission of helping startups transform ideas into reality using cutting-edge technology.

• Slarivo Animated Tab Bar

  Here is Animated Tab Bar component

• Slarivo Floating Nav

  This is a responsive floating bottom navigation bar built with React and Framer Motion. It displays multiple menu items with icons and labels, adapting to screen size by showing icons only on small screens and icons with labels on larger screens. A sliding indicator smoothly animates under the active item, always staying aligned, providing clear visual feedback for the selected section. The design is modern, minimal, and works seamlessly in both light and dark themes.

• Slarivo Circle Menu

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

• Slarivo Navbar with Animated Mega Dropdown

  A responsive React Navbar component implementing animated mega-dropdown menus for desktop interactions and a slide-in overlay menu for mobile devices. It's built using React hooks and utilizes Framer Motion for smooth animations and transitions. Styling is handled with Tailwind CSS classes. The component is structured to easily incorporate various multi-column dropdown data sets

• Slarivo 3D Icon Tabs

  Animated tabs, inspired by Airbnb's latest design update.

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo Breadrcrumb

  Here is Breadrcrumb component

• Slarivo dock

  Here is dock component

• Slarivo Mini Calendar

  This is a sleek and responsive mini calendar component built using React and TailwindCSS, designed to display weekly views with a focus on minimalism and clarity. The selected day is highlighted with a bold background and primary accent color (blue-600), while adjacent dates remain subtle for visual hierarchy. Navigation arrows allow users to switch between months smoothly. The component is ideal for dashboards, schedulers, or date-picking interfaces.

• Slarivo NeoMinimal Footer

  NeoMinimalFooter is a sleek, modern, and minimalistic footer component designed for tech-focused or modern web applications. It combines branding, navigational links, a newsletter/signup input, and social media icons, all within a visually appealing layout.

• Slarivo Back Button

  A stylish animated button component that reveals an arrow icon on hover, perfect for navigation and going back to previous pages.

• Slarivo Calendar

  Here is Calendar component

• Slarivo Calendar

  Here is Calendar component

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Interactive Hover Links

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

• Slarivo Navigation Menu

  A navigation menu component with keyboard navigation and accessibility features.

• Slarivo Dashboard Sidebar

  A premium, dual-theme dashboard & sidebar shell featuring the Charcoal Ink (dark) and Alabaster (light) architectural palettes. Includes collapsible multi-tiered navigation, workspace content frames, and micro-contrast layout spacing. Fully responsive scaffolding for SaaS or AI p

• Slarivo Breadcrumb

  Displays the path to the current resource using a hierarchy of links.

• Slarivo Breadcrumb

  Displays the path to the current resource using a hierarchy of links.

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Previous & Next Button Group

  A versatile button group component for organizing related actions with consistent spacing and visual connection.

• Slarivo Tube Light Navbar

  Here is tube light navbar comopnent

• Slarivo Tabs like bookmark

  shadcn/ui tabs like bookmark

• Slarivo Pagination

  A responsive pagination component for navigating through multiple pages of content.

• Slarivo Pagination

  A responsive pagination component for navigating through multiple pages of content.

• Slarivo Slide Tabs

  SlideTabs — Animated Hover Tab Indicator with Framer Motion SlideTabs is a sleek, interactive tab navigation component built with React and Framer Motion. It features a smooth, animated underline (cursor) that follows the user's hover action, giving your UI a modern and dynamic touch. ✨ Features: Framer Motion-powered hover animation that dynamically adjusts the position and width of the indicator. Custom cursor highlight that appears only when hovering over a tab. Responsive design with minimal styling — easy to customize and extend. Built with accessibility and interactivity in mind using native ul/li elements. 💡 Use Case: Perfect for navigation menus, feature tabs, or landing pages where you want to elevate the UX with subtle motion. 📦 Tech Stack: React (Functional Components + Hooks) Framer Motion for animation Tailwind CSS for styling 🔧 How it Works: Each Tab uses a ref to measure its size and position on hover. The Cursor (animated highlight) moves and resizes smoothly based on the hovered tab. On mouse leave, the cursor fades out for a clean effect.

• Slarivo Morphing Page Dots

  The Morphing Page Dots component is a sleek, interactive pagination indicator that replaces traditional numbers with animated dots. Instead of static circles, the active dot dynamically morphs into a pill shape, creating a smooth, modern transition that clearly highlights the current page. A subtle ripple effect enhances the interaction whenever the page changes, adding polish without overwhelming the UI. All inactive dots remain visible in a muted tone, ensuring clarity and accessibility across light and dark themes. Navigation is handled through clean Lucide arrow icons, giving users intuitive control without bulky buttons. This component is especially well-suited for carousels, sliders, or any multi-page content where a minimal yet visually engaging pagination experience is desired.

• Slarivo Sidebar

  Business-Ready Interface: Real-time stats cards with trend indicators Activity feed with categorized actions and timestamps Quick action buttons with color-coded categories Comprehensive layout that scales across screen sizes Professional Details: Status indicators (online/offline states) Role-based information (Senior Administrator) Consistent iconography throughout the interface Accessibility features (proper ARIA labels, tooltips)

• Slarivo Wheel Pagination

  This Wheel Pagination component provides a modern, interactive way to navigate through multiple pages. Unlike traditional numeric pagination, it shows a range of page numbers at once, highlighting the active page with scale and color, making it immediately recognizable. Users can scroll over the pagination area with the mouse wheel to move between pages, while previous/next arrows offer an alternative click-based navigation. The component intelligently keeps the active page centered within the visible range and supports a customizable number of visible pages, ensuring usability even with dozens or hundreds of pages. Fully compatible with light and dark themes, it also includes an onChange callback, allowing parent components to track the active page, making it ideal for dashboards, data-heavy applications, and modern UI interfaces that require a tactile, visually engaging pagination experience.

• Slarivo Expandable Tabs

  Animated tabs that expand when clicked.

• Slarivo Breadcramb

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

• Slarivo Breadcramb

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

• Slarivo Breadcramb

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

• Slarivo Drawer

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

• Slarivo Drawer

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

• Slarivo Root Toggle

  A select component for switching between major sections of your application, with support for descriptions and icons. Features - Smooth animations - Support for icons and descriptions - Keyboard navigation - Custom trigger styles - Active state tracking - Glass morphism effect - Responsive design

• Slarivo Tree

  Here is Tree component

• Slarivo Floating Dock Navigation

  Floating Dock Navigation

• Slarivo Shifting Dropdown

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

• Slarivo Expanded Tabs

  Here is Expanded Tabs component

• Slarivo Tabs

  Display tab content.

• Slarivo Tabs

  Display tab content.

• Slarivo Tabs

  Display tab content.

• Slarivo Tabs

  Display tab content.

• Slarivo Footer

  The Footer component is a fully configurable, responsive, and theme-aware UI element built with Next.js and Shadcn-style design. It supports dynamic navigation columns, customizable social media links with Lucide icons, and optional badges for highlighting features like “Pro,” “New,” or “Hiring.” The component adapts seamlessly to light and dark modes using Tailwind CSS, ensures accessibility with proper aria-labels, and leverages Next.js Link for client-side navigation. Designed for flexibility, it allows developers to easily extend columns, add additional social platforms, and include extra content like legal links or community sections, making it ideal for professional SaaS, product, or corporate websites.

• Slarivo Dock

  Here is Dock component

• Slarivo Breadcrumb

  Displays the path to the current resource using a hierarchy of links.

• Slarivo Breadcrumb

  Displays the path to the current resource using a hierarchy of links.

• Slarivo Separator

  A separator component for dividing content visually.

• Slarivo Tabs

  A set of layered sections of content with smooth animations and modern styling.

• Slarivo Tabs

  Display tab content.

• Slarivo Animated Shifting Tab Component

  This code implements a reusable React component that creates an animated tabbed interface with a shifting content overlay. It addresses the need for a visually engaging and interactive way to present different sections of content, such as product details, pricing plans, or blog posts. The component uses several libraries to achieve this: React for the core UI, Framer Motion for animations, and React Icons for providing visual elements. Here's a step-by-step breakdown: 1. **`ShiftingDropDown` Component:** This is the main container, holding the `Tabs` component. 2. **`Tabs` Component:** This manages the selected tab state using `useState` hooks for `selected` (the currently selected tab index) and `dir` (direction of animation, 'l' or 'r'). The `handleSetSelected` function updates these states based on mouse events, determining the animation direction. 3. **`Tab` Component:** Each tab is rendered as a button. The styling changes based on whether it's selected, using CSS classes and the `selected` prop. The `FiChevronDown` icon animates on selection. 4. **`Content` Component:** This displays the content for the selected tab. `AnimatePresence` ensures smooth entrance and exit animations for the content using Framer Motion's `initial`, `animate`, and `exit` properties. The `motion.div` smoothly animates the content's position based on the `dir` prop (left or right). 5. **`Bridge` Component:** A simple visual element that creates a bridge connecting the tab to the content. 6. **`Nub` Component:** This dynamically positioned element visually points to the selected tab. `useEffect` and `getBoundingClientRect` are used to calculate its position relative to the selected tab. 7. **Content Components (`Products`, `Pricing`, `Blog`):** These components render the actual content for each tab, using basic HTML elements and styling. 8. **`TABS` Array:** This array defines the data for each tab, mapping titles to their corresponding content components. Example Scenarios: - Displaying product features, pricing tiers, or blog posts. - Creating an interactive FAQ section. - Presenting different views or options within a dashboard. - Implementing a step-by-step guide or tutorial. The component leverages the power of React's state management and Framer Motion's animation capabilities to create a polished and user-friendly experience. The use of CSS classes and inline styles allows for easy customization and theming.

• Slarivo Animated Menu

  A reusable component for animated menu

• Slarivo frosted-hover

  Immersive navigation showcase that reveals frosted-glass ripples as you hover a grid of interactive hotspots layered over a hero image. Includes the full SVG filter stack for the shimmering displacement effect.

• Slarivo Pagination Ant

  Here is Pagination component

• Slarivo Pagination Ant

  Here is Pagination component

• Slarivo Pagination Ant

  Here is Pagination component

• Slarivo Pagination Ant

  Here is Pagination component

• Slarivo Pagination Ant

  Here is Pagination component

• Slarivo Pagination Ant

  Here is Pagination component

• Slarivo Pagination Ant

  Here is Pagination component

• Slarivo Bottom Menu

  An animated bottom navigation menu with smooth transitions.

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• Slarivo The Pagination

  Navigation Menus component from the 21st.dev community.

• Slarivo Tabs [react-aria-components]

  Tabs organize content into multiple sections and allow users to navigate between them.

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

  A tabs component with support for persistent state, shared values across instances, and URL hash navigation. Features - Shared state across multiple instances - Persistent state with localStorage - URL hash navigation - Keyboard navigation - Automatic value detection - Custom styling support - Dark mode support

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Text roll navigation

  Here is Text roll navigation

• Slarivo Menu

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

• Slarivo Cicular Navigation Bar

  Here is circular navigation bar component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Apple Dock

  Here is apple dock component

• Slarivo Navigation Bar

  Here is navigation bar component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo NotchNav

  A center-aligned, fit‑content navigation bar with a softly rounded, smoothly animated notch indicator and full keyboard accessibility that stands out without visual noise.

• 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 Toolbar Dynamic

  A toolbar that changes its height as needed. It grows to show more content and shrinks to save space, keeping your screen neat.

• Slarivo Pagination

  Navigate to the previous or next page.

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

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Pagination

  Here is Pagination component

• Slarivo Breadcrumb

  A navigation aid that shows users their current location within a website or application hierarchy

• Slarivo Next-Gen Pagination: Accessible

  Stop shipping clunky pagination. This drop-in React + shadcn/ui pagination component gives you enterprise-grade accessibility, responsive design, and dark mode support out of the box. Fully customizable, lightweight, and built for production at scale — because your users deserve better navigation.” ⚡ Why this works: Title is punchy, modern, and developer-friendly (“Next-Gen”, “Shadcn-ready” trigger interest). Description highlights pain points (clunky pagination) and the solution (accessible, responsive, production-ready). Uses action words: “Stop”, “drop-in”, “built for production” → this makes developers feel it’s urgent and useful.

• Slarivo Header 03

  header with navigation ment and toggle

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Animated Chip Tab Component

  This code implements a reusable tab component with a visually appealing animated selection effect. It leverages the concept of chip-style tabs, offering a modern and user-friendly interface for navigation. The component addresses the need for clean, interactive tab functionality, enhancing user experience in web applications. The component, `ChipTabs`, renders a series of tabs based on a predefined array (`tabs`). The `useState` hook manages the currently selected tab. Each tab is rendered as a `Chip` component. The `Chip` component is a styled button; when clicked, it updates the selected state using the `setSelected` function. The visual selection is achieved using CSS classes to change text color and background, and an animated underline is added using `Framer Motion`. This animation provides smooth visual feedback to the user upon tab selection. The `motion.span` element creates an animated, colored underline that smoothly transitions when a different tab is selected. This utilizes the `layoutId` prop for smooth transitions and the `transition` prop to customize the animation's duration and type. This component is particularly useful for navigation within web applications, allowing users to easily switch between different sections or views. It can be integrated into dashboards, settings pages, or any interface requiring tab-based navigation. For example, this could be used in a blog application for navigation between home, search, about, and FAQ pages, or in a user profile for managing different sections of their profile. The component's customizable nature allows for easy integration into various design systems and applications. The code utilizes the following key technologies: * **React:** For component-based UI development and state management. * **Framer Motion:** For creating smooth, visually appealing animations. * **CSS:** For styling and layout. The component is designed to be highly reusable and easily customizable to suit a variety of design needs.

• Slarivo Smart Breadcrumb

  The SmartBreadcrumb component is a modern, fully configurable breadcrumb navigation solution for React projects. It supports dynamic routes, optional icons using Lucide React, ellipsis handling for long paths, and customizable separators, making it ideal for dashboards, analytics pages, or complex web apps. Each breadcrumb item can be a clickable link or the current page indicator, and the component includes smooth hover transitions and a clean, responsive design. With props to control icon visibility, maximum visible items, separator style, and overall styling, SmartBreadcrumb provides a flexible, reusable, and visually appealing way to guide users through multi-level navigation paths.

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Breadcrumb

  Here is Breadcrumb component

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Text Roll

  An animated text component that reveals letters with a smooth vertical roll effect on hover, built with Motion.

• Slarivo Pagination

  Neobrutalism-styled pagination 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 Scroll Legend

  A sleek, interactive scroll legend component inspired by the elegant UI of Raycast. Built with accessibility and performance in mind, this component enhances user experience by providing clear visual guidance during scroll interactions. Fully responsive, theme-aware (light/dark), and easy to integrate into any React or Next.js project. Perfect for dashboards, documentation sites, or any interface where progressive scrolling needs a little extra magic.

• Slarivo Menubar

  A horizontal menu bar component for navigation and actions.

• Slarivo Header 04

  header with command search toggle

• Slarivo Footer

  Website footer section with brand logo, navigation link columns, copyright, policy links, and a light/dark theme toggle.

• Slarivo Toggle nav

  here is toggle nav component

• Slarivo Pagination

  Navigation component for splitting content across multiple pages with previous/next controls and page numbers

• Slarivo Menubar

  Here is Menubar component

• Slarivo MacOS dock

  MacOS dock smooth animation you can use

• Slarivo NestedTabs

  The Nested Tabs (Multi-Level Tabs) component introduces a structured way to organize complex content within your application. Unlike traditional flat tabs, it supports hierarchical navigation where each main tab can reveal its own set of sub-tabs, allowing users to dive deeper into related sections without overwhelming the interface. Smooth animations ensure that transitions between parent and child tabs feel natural and engaging. This makes it ideal for dashboards, documentation portals, and settings panels, where users often need to navigate across multiple categories and subcategories. With built-in support for both light and dark themes, the component adapts seamlessly to modern UI designs while keeping content neatly organized and highly accessible.

• Slarivo Link Hover

  Navigation links with creative hover animations powered by GSAP.

• Slarivo Squiggly Underline

  Navigation links with animated squiggly SVG underline on the active item. Built with Framer Motion.

• Slarivo Sidebar 1

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

• Slarivo Dynamic Action

  Here is dynamic action bar component

• Slarivo Breadcrumb

  Breadcrumb component

• Slarivo Tabs

  Here is Tabs component

• Slarivo Navigation Menu

  Here is Navigation Menu component

• Slarivo Menubar

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

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

  A dense glassmorphic sidebar navigation with animated hover for dashboards and internal tools.

• Slarivo Navbar

  Here is Navbar Component

• Slarivo Navbar

  Here is Navbar Component

• Slarivo Navbar

  Here is Navbar Component

• Slarivo Navbar

  Here is Navbar Component

• Slarivo Navbar

  Here is Navbar Component

• Slarivo Navbar

  Here is Navbar Component

• Slarivo Interfaces Breadcrumb

  Displays the path to the current resource using a hierarchy of links.

• Slarivo Reshaped Link

  Navigation link for use within text that respects line breaks and text flow. Works with both href and onClick (rendering an anchor or button tag), offers underline and plain variants, primary/positive/critical/warning/inherit colors, a disabled state and an optional icon for standalone usage.

• Slarivo Reshaped Link

  Navigation link for use within text that respects line breaks and text flow. Works with both href and onClick (rendering an anchor or button tag), offers underline and plain variants, primary/positive/critical/warning/inherit colors, a disabled state and an optional icon for standalone usage.

• Slarivo Reshaped Link

  Navigation link for use within text that respects line breaks and text flow. Works with both href and onClick (rendering an anchor or button tag), offers underline and plain variants, primary/positive/critical/warning/inherit colors, a disabled state and an optional icon for standalone usage.

• Slarivo Reshaped Link

  Navigation link for use within text that respects line breaks and text flow. Works with both href and onClick (rendering an anchor or button tag), offers underline and plain variants, primary/positive/critical/warning/inherit colors, a disabled state and an optional icon for standalone usage.

• Slarivo Reshaped Link

  Navigation link for use within text that respects line breaks and text flow. Works with both href and onClick (rendering an anchor or button tag), offers underline and plain variants, primary/positive/critical/warning/inherit colors, a disabled state and an optional icon for standalone usage.

• Slarivo Sidebar Nav Skeleton

  A loading placeholder for a sidebar navigation, with a logo header, a list of icon-and-label nav rows, and a user profile row at the bottom.

• Slarivo Table of Content

  A dependency-free vertical table of content with pointer scrubbing, keyboard navigation, spring-driven tick magnification, and floating section previews.

• Slarivo Great UI Animated Link

  An interactive link component supporting 13 premium hover variants including custom clipping masks, SVG sine waves, and text marquee animations.

• Slarivo Pagination

  Accessible pagination navigation with a sliding animated thumb and rolling page numbers for paging through search results and long lists.

• Slarivo Emoji Nav

  Here is emoji nav bar component

• Slarivo Scroll Pagination

  This Icon-Based Contextual Pagination component transforms traditional pagination into an interactive, visually intuitive experience. Instead of showing just numbers, each page is represented by an icon or mini preview, giving users a clear visual cue of the content. The active page is highlighted with scale, color, and border effects, making it instantly recognizable. For large numbers of pages, the component intelligently uses ellipsis (...) to keep the interface compact while still showing nearby pages and first/last pages. Hovering over an icon displays a tooltip, providing additional context for that page. Navigation is made easy with previous and next arrows, and a built-in onChange callback allows the parent app to track the current page. Fully light and dark theme compatible, this component is ideal for modern dashboards, creative apps, or any interface where a visual, intuitive pagination system enhances user experience.

• Slarivo Capsule Tabs

  This Scrollable Capsule Tabs component is designed to handle a large number of tabs elegantly. It displays a limited number of tabs at a time (visibleCount) and allows users to navigate through them using left/right arrows or pagination dots. The active tab is highlighted, and its corresponding content is displayed below. This layout is ideal for dashboards, analytics menus, or any interface where space is limited but many options need to be accessible. The smooth hover effects, pill-shaped tabs, and responsive design make it visually appealing and user-friendly.

• Slarivo Dock

  Navigation Menus component from the 21st.dev community.

• Slarivo Reshaped Carousel

  Displays its children as scrollable carousel items with a configurable number of visible items. Supports gap control aligned with your product grid, full-width bleed, onScroll/onChange event handlers for syncing with other components, and imperative navigation through instanceRef methods.

• Slarivo Reshaped Carousel

  Displays its children as scrollable carousel items with a configurable number of visible items. Supports gap control aligned with your product grid, full-width bleed, onScroll/onChange event handlers for syncing with other components, and imperative navigation through instanceRef methods.

• Slarivo Reshaped Carousel

  Displays its children as scrollable carousel items with a configurable number of visible items. Supports gap control aligned with your product grid, full-width bleed, onScroll/onChange event handlers for syncing with other components, and imperative navigation through instanceRef methods.

• 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 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 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 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 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 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 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 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 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 Reshaped Tabs

  Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection, equal-width items, flexible panel placement and native radio form submission via the name prop.

• Slarivo Reshaped Tabs

  Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection, equal-width items, flexible panel placement and native radio form submission via the name prop.

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

  Here is Menu component

• Slarivo Menu

  Here is Menu component

• Slarivo Menu

  Here is Menu component

• Slarivo Menu

  Here is Menu component

• Slarivo Flexnative Breadcrumb

  A Breadcrumb navigation from the Flexnative UI registry with 9 variants: basic links, leading home icon, custom slash separator, dot separator, ellipsis collapse, dropdown for hidden levels, responsive collapse, asChild custom link, and an end-of-trail page switcher. Built on Radix (Slot + dropdown-menu).

• Slarivo Flexnative Breadcrumb

  A Breadcrumb navigation from the Flexnative UI registry with 9 variants: basic links, leading home icon, custom slash separator, dot separator, ellipsis collapse, dropdown for hidden levels, responsive collapse, asChild custom link, and an end-of-trail page switcher. Built on Radix (Slot + dropdown-menu).

• Slarivo Flexnative Breadcrumb

  A Breadcrumb navigation from the Flexnative UI registry with 9 variants: basic links, leading home icon, custom slash separator, dot separator, ellipsis collapse, dropdown for hidden levels, responsive collapse, asChild custom link, and an end-of-trail page switcher. Built on Radix (Slot + dropdown-menu).

• Slarivo Flexnative Breadcrumb

  A Breadcrumb navigation from the Flexnative UI registry with 9 variants: basic links, leading home icon, custom slash separator, dot separator, ellipsis collapse, dropdown for hidden levels, responsive collapse, asChild custom link, and an end-of-trail page switcher. Built on Radix (Slot + dropdown-menu).

• Slarivo Flexnative Breadcrumb

  A Breadcrumb navigation from the Flexnative UI registry with 9 variants: basic links, leading home icon, custom slash separator, dot separator, ellipsis collapse, dropdown for hidden levels, responsive collapse, asChild custom link, and an end-of-trail page switcher. Built on Radix (Slot + dropdown-menu).

• Slarivo Flexnative Breadcrumb

  A Breadcrumb navigation from the Flexnative UI registry with 9 variants: basic links, leading home icon, custom slash separator, dot separator, ellipsis collapse, dropdown for hidden levels, responsive collapse, asChild custom link, and an end-of-trail page switcher. Built on Radix (Slot + dropdown-menu).

• Slarivo Flexnative Breadcrumb

  A Breadcrumb navigation from the Flexnative UI registry with 9 variants: basic links, leading home icon, custom slash separator, dot separator, ellipsis collapse, dropdown for hidden levels, responsive collapse, asChild custom link, and an end-of-trail page switcher. Built on Radix (Slot + dropdown-menu).

• Slarivo Flexnative Breadcrumb

  A Breadcrumb navigation from the Flexnative UI registry with 9 variants: basic links, leading home icon, custom slash separator, dot separator, ellipsis collapse, dropdown for hidden levels, responsive collapse, asChild custom link, and an end-of-trail page switcher. Built on Radix (Slot + dropdown-menu).

• Slarivo Flexnative Breadcrumb

  A Breadcrumb navigation from the Flexnative UI registry with 9 variants: basic links, leading home icon, custom slash separator, dot separator, ellipsis collapse, dropdown for hidden levels, responsive collapse, asChild custom link, and an end-of-trail page switcher. Built on Radix (Slot + dropdown-menu).

• Slarivo HeroUI Drawer

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

• Slarivo HeroUI Drawer

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

• Slarivo Floating Dock

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

• Slarivo Tab Navbar

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

• Slarivo Table of Contents

  On-this-page navigation that tracks the active heading as you scroll and highlights it with a moving border marker.

• Slarivo Table of Contents

  An auto-scrolling table of contents that highlights the active section using an intersection observer as the reader scrolls.

• Slarivo Pill Breadcrumb

  A compact breadcrumb navigation with a rounded pill container, a home icon, and chevron separators for showing the current page path.

• Slarivo Underlined Navigation Menu

  A horizontal navigation menu with icons where the active and hovered items are highlighted by an animated underline.

• Slarivo Breadcrumb with Tab Active

  A breadcrumb navigation whose current page is highlighted as a rounded badge, using chevron separators between links.

• Slarivo Random Letter Swap Navigation

  A horizontal navigation menu whose links shuffle their letters in a glitchy random-swap animation on hover.

• Slarivo Breadcrumb with Avatar

  A breadcrumb navigation trail whose items include small avatar images alongside the label, ideal for showing organization and user context in an app header.

• Slarivo Button Breadcrumb

  A breadcrumb navigation where each item is rendered as a button, with icons and the current page highlighted as a secondary button.

• Slarivo Magnetic Dock

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

• Slarivo Centered Nav Header

  A responsive three-column site header with the logo pinned left, navigation links centered, and a sign-in link plus primary CTA on the right, collapsing into a mobile sheet menu.

• Slarivo Steps Breadcrumb

  A breadcrumb navigation that displays a horizontal sequence of icon steps connected by short lines to show progress through a multi-stage flow.

• Slarivo Agency Footer

  A clean multi-column footer section with brand summary, sitemap links, legal pages, contact details, and social icons for agency and business websites.

• Slarivo Separator

  Here is Separator component

• Slarivo 8bit Navigation Menu

  An 8-bit styled navigation menu with pixel-border dropdown panels. Pure React state-based implementation with no Radix dependency — trigger, content, list, item, link, indicator and viewport subcomponents.

• Slarivo Breadcrumbs

  This is a breadcrumbs component

• Slarivo Breadcrumbs

  Display the current page location within a navigational hierarchy.

• Slarivo Breadcrumbs

  Display the current page location within a navigational hierarchy.

• Slarivo Breadcrumbs

  Display the current page location within a navigational hierarchy.

• Slarivo Breadcrumbs

  Display the current page location within a navigational hierarchy.

• Slarivo Breadcrumbs

  Display the current page location within a navigational hierarchy.

• Slarivo Breadcrumbs

  Display the current page location within a navigational hierarchy.

• Slarivo HeroUI Separator

  HeroUI v3 Separator — horizontal/vertical divider with content, variants, on-surface usage and a custom render-function API.

• Slarivo Sidebar Light

  Lightweight sidebar navigation with nested items, icons, and active route highlighting.

• Slarivo BeUI Expandable Tabs

  Navigation Menus component from the 21st.dev community.

• Slarivo Astryx App Shell

  The outermost layout for an application, from Meta's Astryx design system. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page — it handles responsive mobile navigation and skip-to-content automatically.

• Slarivo Astryx App Shell

  The outermost layout for an application, from Meta's Astryx design system. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page — it handles responsive mobile navigation and skip-to-content automatically.

• Slarivo Astryx App Shell

  The outermost layout for an application, from Meta's Astryx design system. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page — it handles responsive mobile navigation and skip-to-content automatically.

• Slarivo Astryx App Shell

  The outermost layout for an application, from Meta's Astryx design system. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page — it handles responsive mobile navigation and skip-to-content automatically.

• Slarivo Astryx App Shell

  The outermost layout for an application, from Meta's Astryx design system. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page — it handles responsive mobile navigation and skip-to-content automatically.

• Slarivo Astryx Breadcrumbs

  Breadcrumbs show the user's location in a hierarchy and let them navigate back up, from Meta's Astryx design system. Compose BreadcrumbItem children with links, icons, or onClick handlers; supports custom separators and a subtler supporting variant.

• Slarivo Astryx Breadcrumbs

  Breadcrumbs show the user's location in a hierarchy and let them navigate back up, from Meta's Astryx design system. Compose BreadcrumbItem children with links, icons, or onClick handlers; supports custom separators and a subtler supporting variant.

• Slarivo Astryx Breadcrumbs

  Breadcrumbs show the user's location in a hierarchy and let them navigate back up, from Meta's Astryx design system. Compose BreadcrumbItem children with links, icons, or onClick handlers; supports custom separators and a subtler supporting variant.

• Slarivo Astryx Breadcrumbs

  Breadcrumbs show the user's location in a hierarchy and let them navigate back up, from Meta's Astryx design system. Compose BreadcrumbItem children with links, icons, or onClick handlers; supports custom separators and a subtler supporting variant.

• Slarivo Astryx Breadcrumbs

  Breadcrumbs show the user's location in a hierarchy and let them navigate back up, from Meta's Astryx design system. Compose BreadcrumbItem children with links, icons, or onClick handlers; supports custom separators and a subtler supporting variant.

• Slarivo Reshaped Breadcrumbs

  Renders Breadcrumbs.Item elements separated by chevron icons; an item without onClick or href becomes the active current page. Supports primary color, per-item icons and disabled state, collapsing long paths with defaultVisibleItems and an expand button, custom separators and custom item content.

• Slarivo Reshaped Breadcrumbs

  Renders Breadcrumbs.Item elements separated by chevron icons; an item without onClick or href becomes the active current page. Supports primary color, per-item icons and disabled state, collapsing long paths with defaultVisibleItems and an expand button, custom separators and custom item content.

• Slarivo Reshaped Breadcrumbs

  Renders Breadcrumbs.Item elements separated by chevron icons; an item without onClick or href becomes the active current page. Supports primary color, per-item icons and disabled state, collapsing long paths with defaultVisibleItems and an expand button, custom separators and custom item content.

• Slarivo Reshaped Breadcrumbs

  Renders Breadcrumbs.Item elements separated by chevron icons; an item without onClick or href becomes the active current page. Supports primary color, per-item icons and disabled state, collapsing long paths with defaultVisibleItems and an expand button, custom separators and custom item content.

• Slarivo Reshaped Breadcrumbs

  Renders Breadcrumbs.Item elements separated by chevron icons; an item without onClick or href becomes the active current page. Supports primary color, per-item icons and disabled state, collapsing long paths with defaultVisibleItems and an expand button, custom separators and custom item content.

• Slarivo Reshaped Breadcrumbs

  Renders Breadcrumbs.Item elements separated by chevron icons; an item without onClick or href becomes the active current page. Supports primary color, per-item icons and disabled state, collapsing long paths with defaultVisibleItems and an expand button, custom separators and custom item content.

• Slarivo Reshaped Breadcrumbs

  Renders Breadcrumbs.Item elements separated by chevron icons; an item without onClick or href becomes the active current page. Supports primary color, per-item icons and disabled state, collapsing long paths with defaultVisibleItems and an expand button, custom separators and custom item content.

• Slarivo Reshaped Pagination

  Renders the full range of pages from the total count, automatically truncating the display around the currently selected page. Requires aria-labels for the previous/next controls, supports per-page aria-labels, an onChange handler and both controlled and uncontrolled page state.

• Slarivo Reshaped Pagination

  Renders the full range of pages from the total count, automatically truncating the display around the currently selected page. Requires aria-labels for the previous/next controls, supports per-page aria-labels, an onChange handler and both controlled and uncontrolled page state.

• Slarivo Reshaped Pagination

  Renders the full range of pages from the total count, automatically truncating the display around the currently selected page. Requires aria-labels for the previous/next controls, supports per-page aria-labels, an onChange handler and both controlled and uncontrolled page state.

• Slarivo Variable Font Hover Nav

  A horizontal navigation menu whose link letters animate from thin to bold outward from the center on hover using variable font weight.

• Slarivo Scroller

  A scrollable container with fading edge shadows, optional hidden scrollbar, and navigation arrows for vertical or horizontal overflow.

• Slarivo Animated Footer Section

  A centered site footer with animated navigation links, a logo, and a row of social media icons.

• Slarivo Footer Section 4

  A responsive footer section with a branded blue card, animated social icons, multi-column navigation links, and a newsletter email signup.

• Slarivo Footer Section 2

  A promotional footer section with a headline, app store download buttons, navigation links, animated social media icons, and an app screenshot on a colored card.

• Slarivo Motion Navigation Menu

  An animated navigation menu with a single morphing dropdown container, a layout-animated active pill, and direction-aware spring content transitions.

• 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 8-bit Breadcrumb

  Pixel-art breadcrumb navigation from 8bitcn.com — Press Start 2P font with chunky chevron separators between path segments.

• Slarivo Astryx Breadcrumb Item

  BreadcrumbItem is a single step in a Breadcrumbs trail, from Meta's Astryx design system. Renders as a link (href), a button (onClick), or the current page (isCurrent), with an optional start icon. Compose inside Breadcrumbs to build navigation trails.

• Slarivo Icon Breadcrumb

  A breadcrumb navigation trail that uses an icon for the home link instead of a text label.

• Slarivo Link Breadcrumb

  A breadcrumb navigation trail whose items render as Next.js links, with a chevron separator and a current-page label.

• Slarivo Custom Separator Breadcrumb

  A breadcrumb navigation that replaces the default chevron with a slash separator using custom separator children.

• Slarivo Tabs Breadcrumb

  A breadcrumb navigation where each item is rendered as a rounded badge pill with chevron separators.

• Slarivo Breadcrumb with Project, User & Document Info

  A breadcrumb navigation that shows an organization logo, a user avatar with name and email, and the current document with an icon.

• Slarivo Scroll Spy

  A scroll-spy navigation bar that tracks the section currently in view and highlights it with an animated sliding pill, with smooth click-to-scroll for both the window and a scrollable container. Includes a useScrollSpy hook.

• Slarivo Tabs

  An accessible tabs component with an animated sliding indicator, keyboard navigation, and directional panel transitions.

• Slarivo Tree View

  An accessible file-explorer tree view with full keyboard navigation, animated expand/collapse disclosure, and single selection.

• Slarivo Menu

  An accessible dropdown menu built on Base UI with support for items, links, checkboxes, radio groups, submenus, separators and keyboard shortcuts.

• Slarivo Hero 03

  Hero banner , designer, product, design code

• Slarivo Stacking Navbar

  a simple stacking navbar component made with framer motion and tailwind css.

• Slarivo Header Navbar

  A responsive site header with a navigation bar, animated logo, optional banner slot, and an animated mobile disclosure menu.

• Slarivo Reshaped Toggle button group

  Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and full keyboard navigation.

• Slarivo ReUI Scrollspy

  ReUI Scrollspy with the first 2 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo Breadcrumb

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

• Slarivo Page Header Breadcrumb

  A page header block that pairs a breadcrumb trail with the current page title in a rounded, shadowed card.

• Slarivo Navbars

  Here is Navbars component

• Slarivo Navbar

  A modern style animated navbar with full fledge mega menu and a flare moving on border of the navbar.

• Slarivo Agent To-do List

  An animated Cursor-style to-do checklist that an AI agent maintains, with a collapsible header showing overall progress and done, in-progress, and pending item states.

• Slarivo The Blueprint of Digital Craft

  In a world of cookie-cutter templates, we return to the fundamentals of great design. At Mysh, we treat every digital project like a custom build, combining the precision of a geometric grid with the creative spark of a fresh sketchbook. From the first…

• Slarivo Navbar

  A Navbar component for helping users move through pages, sections, and application areas, featuring navbar, dashboard, tabs, search.

• Slarivo Navbar

  A Navbar component for helping users move through pages, sections, and application areas, featuring navbar, search, theme toggle, theme-toggle.

• Slarivo Reshaped Toggle button group

  Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and…

• Slarivo Reshaped Toggle button group

  Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and…

• Slarivo Reshaped Toggle button group

  Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and…

• Slarivo ReUI Scrollspy

  ReUI Scrollspy with the first 2 official ReUI examples, preserved from the MIT-licensed source registry.

• Slarivo Frame

  A framed container for grouping related information with header, panels, and footer sections.

• Slarivo Adaptive Notch Navigation Bar

  An adaptive, inverted-curve notch navigation system featuring a desktop triple-island layout that seamlessly morphs into a unified responsive mobile drawer with spring animations and zero border seams.

• Slarivo Right Side Navigation Calendar

  A single-date calendar with month navigation arrows positioned on the right side and left-aligned caption.

• Slarivo Help Dropdown Menu

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

• 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 Settings Card with Sidebar

  A settings card with a vertical sidebar of icon-labeled sections that swap the panel content when selected.

• Slarivo Tabs (Radix UI)

  Accessible tabs built on Radix UI with a spring-animated active underline and a blur-and-height motion transition between panels.

• Slarivo Pagination with Page Info and Page Size

  A pagination control that shows the current page range, numbered page links with ellipsis, and a results-per-page select.

• Slarivo Tabs With Icons

  A tabbed interface with an icon beside each tab label for switching between account settings sections like details, profile, password, and team.

• Slarivo Pagination with Ellipsis

  A joined pagination control with previous/next arrows, page number buttons, and truncating ellipsis for large page counts.

• Slarivo Pagination

  A pagination control with previous/next buttons, numbered page links and truncating ellipsis for navigating multi-page content.

• Slarivo Calendar with Dropdown Navigation

  A date-picker calendar with dropdown menus to quickly navigate between months and years across a wide date range.

• Slarivo Table Pagination

  A table pagination control with a rows-per-page select, an item range label, and previous/next navigation buttons.

• Slarivo Pagination with Ellipsis

  A pagination component that uses an ellipsis to truncate long page ranges while keeping navigation controls visible.

• Slarivo Numberless Pagination with Text

  A pagination control without page numbers that shows Previous and Next buttons around a current-page text label like "Page 1 of 21".

• Slarivo Numberless Pagination

  A compact pagination control with only previous and next buttons joined in a bordered group, without page numbers.

• Slarivo Pagination

  A compact, Tron-inspired pagination control with previous/next arrows, truncated page numbers with ellipses, sibling range, and a page-count indicator.

• Slarivo Pagination with Icon and Label

  A pagination component with labeled Previous and Next controls using chevron icons.

• Slarivo MacBook Neo Hero

  Scroll-driven image-sequence hero with floating glass step cards. Pin the page, scrub through hundreds of frames as the user scrolls, and reveal contextual cards at each segment. Inspired by Apple's product pages.

• Slarivo Footer Section 3

  Animated footer section with a noise-textured headline banner, newsletter signup, social icons, and navigation link columns.

• Slarivo Hero Section with Device Mockups

  A full-screen hero section with a navbar, animated blur-in headline and CTA buttons, and a desktop dashboard screenshot overlaid with an iPhone device mockup.

• Slarivo Scroll Direction: Hide Header

  A sticky header that hides when scrolling down and reappears when scrolling up. Uses useMotionValueEvent to detect scroll direction.

• Slarivo Variable Font Proximity Nav

  A navigation menu whose items thicken their variable font weight as the cursor approaches, using an exponential proximity falloff.

• Slarivo Drill-down Submenu Dropdown

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

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

  Animated tabs component with a smooth sliding indicator, offering underline, pill, and segment variants with icon support and full keyboard navigation.

• Slarivo Segmented Control Tabs

  A compact segmented-control style tab switcher with icons that toggles between daily, weekly, monthly and yearly stat cards.

• Slarivo Vertical Settings Tabs

  A settings panel with vertical underline tabs for switching between profile, security, notifications, and integrations sections.

• Slarivo Multi-level Collapsible Menu

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

• Slarivo Underline Tabs

  A tabs component with an animated underline indicator for switching between content panels.

• Slarivo Morphing Scroll Navbar

  A responsive navbar that morphs from a full-width header into a blurred floating capsule, compacts while scrolling down, restores on upward scroll, and tracks reading progress.

• Slarivo Bjork Pagination

  A styled pagination control with page number links, previous/next buttons, and an ellipsis for skipped pages, for navigating multi-page lists or tables.

• Slarivo Breadcrumb

  A navigation trail of links showing the current page's location within a site's hierarchy, with a themed muted text style.

• Slarivo Bjork Tabs

  A styled tabbed panel switcher for toggling between two or more related content views in the same space.

• Slarivo Immersive Full Screen Navigation

  A Immersive Full Screen Navigation component for helping users move through pages, sections, and application areas, featuring navigation, navigation menu, navigation-menu, mega menu.

• Slarivo Sticky Header Navbar

  A sticky site header with a centered pill-shaped nav bar, logo, sign in/up buttons, and an animated dropdown mobile menu.

• Slarivo Minimal Two-Column Footer

  A Minimal Two-Column Footer component for closing pages with navigation, contact details, and supporting links, featuring footer, navigation, responsive behavior, theme-aware styling.

• Slarivo Simple Centered Footer

  A minimal centered site footer with a logo, a single horizontal nav row, circular social icon buttons, and a copyright line.

• Slarivo Minimal Centered Hero

  A zero-decoration hero section with an eyebrow label, a large tracking-tight headline, a subline, and a pill call-to-action button, for landing page tops.

• Slarivo Classic Header with Sheet Menu

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

• Slarivo Footer 04

  A responsive website footer with logo, navigation links, a newsletter subscribe form, copyright, and social media icons.

• Slarivo Headless Tabs

  Accessible, fully customizable tab interface built on Headless UI with an animated active-tab highlight, focus management and keyboard navigation.

• Slarivo Tabs with Icons

  A tabs component with icon-labeled triggers switching between card panels for dashboard overview, analytics, and settings views.

• Slarivo Icon with Title Tabs

  A tabbed interface where each trigger stacks an icon above its label, with a distinct visual content panel below each tab.

• Slarivo Icon Only Tabs

  Compact icon-only tab triggers for switching between grid, list, and row content views.

• Slarivo Tabs Subtle

  Horizontal tab navigation with proximity-based hover, an animated pill selection indicator, and fluid variable-font-weight transitions, built on Radix Tabs. Ported from Fluid Functionalism by Micka Touillaud.

• Slarivo Tabs with Count Badges

  A line-style tabbed interface whose trigger labels are paired with secondary count badges, ideal for inbox, drafts, and archive style views.

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

• Slarivo What Saa SApp Shell

  Reusable SaaS dashboard shell with sidebar navigation, header and workspace content area.

• Slarivo Sunset Skyline Hero

  A full-screen anime-style scroll-locked hero: scrolling forward pushes the camera through a window onto a Tokyo skyline at sunset, scrolling back closes it again — ending on a giant Japanese brand mark behind a transparent skyline cutout, topped with a…