Floating Dock

Below is a beautiful ios style floating doc component that can be used as a navigation bar

FloatingDock

Installation

$ pnpm dlx shadcn@latest add https://pulseui-henna.vercel.app/registry/FloatingDock.json

Props

Prop	Type	isCompulsory	Description
links	{ title: string; icon: React.ReactNode; href: string }[]	true	The list of all the navigation items

Usage

Navbar.tsx

import { House, Terminal, RefreshCcw } from "lucide-react";
import FloatingDock from "@/components/FloatingDock";
export default function NavBar(){    
const links = [    
	{
      title: "Home",
      icon: (
        <House
          size={20}
          className="h-full w-full text-neutral-500 dark:text-neutral-300"
        />
      ),
      href: "#",
    },
    {
      title: "Terminal",
      icon: (
        <Terminal
          size={20}
          className="h-full w-full text-neutral-500 dark:text-neutral-300"
        />
      ),
      href: "#",
    },
    {
      title: "Refresh",
      icon: (
        <RefreshCcw
          size={20}
          className="h-full w-full text-neutral-500 dark:text-neutral-300"
        />
      ),
      href: "#",
    },
 ];

    return (
        <FloatingDock links={links}/>
    );
}