Published on March 24, 2025

BuouUI Floating Dock: A Sleek Mac-style Navigation Bar

buoooou

@buoooou0

BuouUI Floating Dock: A Sleek Mac-style Navigation Bar

BuouUI introduces the Floating Dock, a stylish and interactive navigation bar inspired by macOS. With smooth animations and a customizable layout, this component enhances user experience and provides a modern look for web applications.

🚀 Features

Floating Design: Mimics the Mac dock with a sleek floating effect.
Smooth Animations: Powered by framer-motion for seamless transitions.
Customizable: Adjust icon size, magnification, spacing, and more.
Mobile & Desktop Support: Responsive across different screen sizes.
Easy Integration: Works effortlessly with Tailwind CSS and shadcn/ui.

📦 Installation Guide

To install the Floating Dock component, follow these steps:

1️⃣ Install dependencies:

npm install framer-motion class-variance-authority

2️⃣ Install required shadcn/ui components:

npx shadcn@latest add tooltip button separator

3️⃣ Copy and paste the Floating Dock code into your project.

🛠️ API Reference

1️⃣ First Dock

Prop	Type	Description
`mobileClassName`	`string`	Additional classes for mobile view.
`desktopClassName`	`string`	Additional classes for desktop view.
`items`	`{ title, icon, href }[]`	Defines the dock items (title, icon, link).
`animate`	`boolean`	Enables or disables dock animations.

2️⃣ Second Dock

Prop	Type	Description
`className`	`string`	Additional classes for the Dock.
`whileTap`	`string`	Animation variant for tap interactions.
`...props`	`motion.div props`	Other props forwarded to the motion div.

3️⃣ Third Dock

Prop	Type	Description
`className`	`string`	Additional classes for the Dock.
`children`	`React.ReactNode`	The content of the Dock.
`size`	`number`	Icon size.
`magnification`	`number`	Icon magnification effect.
`distance`	`number`	Spacing between icons.
`...props`	`motion.div props`	Other props forwarded to the motion div.

🎯 Usage Example

Here’s how you can use the Floating Dock in your project:

const links = [
  {
    title: "Twitter",
    icon: (
      <Twitter className="size-full text-neutral-500 dark:text-neutral-300" />
    ),
    href: "https://x.com/bean921112",
  },
  {
    title: "GitHub",
    icon: (
      <Icons.gitHub className="size-full text-neutral-500 dark:text-neutral-300" />
    ),
    href: "https://github.com/buoooou",
  },
]
 
export default function Demo() {
  return (
    <div className="flex items-center justify-center h-[35rem] w-full">
      <FloatingDock
        mobileClassName="translate-y-20" // only for demo, remove for production
        items={links}
      />
    </div>
  )
}

🔥 Why Use BuouUI’s Floating Dock?

Provides a modern and aesthetic touch to any UI.
Enhances navigation by making important links more accessible.
Built with performance and smooth animations in mind.
Fully customizable to match your project's branding.

With BuouUI’s Floating Dock, you can elevate the user experience of your web application effortlessly. Try it today and give your project a sleek, macOS-inspired navigation bar! 🚀

See all posts