Docs
Floating Dock

Floating Dock

A floating dock component like mac, acts as a navigation bar.

Look at the Bottom Dock
BuouUI

Installation

Install the following dependencies:

npm install framer-motion class-variance-authority

Install the shadcn/ui dependencies:

You need to install shadcn components, like this:

npx shadcn@latest add tooltip button separator

Copy and paste the Floating Dock code into your project.

API Reference

First Dock

Props

PropTypeDescription
mobileClassNamestringAdditional classes for the mobile.
desktopClassNamestringAdditional classes for the desktop.
items{ title: string; icon: React.ReactNode; href: string }[]The items to display in the dock.
animatebooleanEnables or disables sidebar animations.

Usage

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>
  )
}

Second Dock

Props

PropTypeDescription
classNamestringAdditional classes for the Dock.
whileTapstringVariantLabels | TargetAndTransition
...propsmotion.div propsOther props forwarded to the motion div.

Three Dock

Props

PropTypeDescription
classNamestringAdditional classes for the Dock.
childrenReact.ReactNodeThe content of the Dock.
sizenumberDock Icon size.
magnificationnumberDock Icon magnification.
distancenumberDock Icon distance.
...propsmotion.div propsOther props forwarded to the motion div.
Multi-Step ...AI Image Co...