Skip to main content

Metallic Dock Button

A dock navigation bar with liquid metal shader effect buttons. Each button activates with a stunning metallic ring animation.

NavigationReactFramer MotionTailwind CSSWebGL
CSSTailwind

Manual

Create a file and paste the following code into it.

src/index-demo.tsx
1
2
3
4
5
6
7
8
9
10
11
import Dock from "@/components/dock";

function Demo() {
  return (
    <main className="w-full min-h-dvh px-4 py-12 md:px-6 md:py-16 flex items-center justify-center">
      <Dock />
    </main>
  );
}

export default Demo;

Update the import paths to match your project setup.

Similar components

Hidden Layer Navigation

Max

Motion Dock Navigation

Morphing Navbar

Navbar Menu

Live Preview

Resource details

PublishedMarch 12, 2026
CategoryNavigation
ReactFramer MotionTailwind CSSWebGL