Glass Dock

Navigation 2

About

A macOS-style application dock with liquid-glass refraction and smooth cursor-driven icon magnification, used for app launchers and navigation bars.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Dock to your project and fits it to your theme.

Code

How Glass Dock is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  GlassDock,
  GlassDockItem,
  GlassDockSeparator,
} from "@/components/ui/glass-dock";
import {
  Folder,
  MessageSquare,
  Music,
  Settings,
  Mail,
  Calendar,
} from "lucide-react";

export default function GlassDockDemo() {
  return (
    <div className="relative flex h-screen w-full items-end justify-center overflow-hidden bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 pb-8">
      <GlassDock>
        <GlassDockItem label="Mail">
          <div className="flex size-full items-center justify-center rounded-[22.5%] bg-blue-500 text-white">
            <Mail className="size-1/2" />
          </div>
        </GlassDockItem>
        <GlassDockItem label="Messages" active>
          <div className="flex size-full items-center justify-center rounded-[22.5%] bg-green-500 text-white">
            <MessageSquare className="size-1/2" />
          </div>
        </GlassDockItem>
        <GlassDockItem label="Music">
          <div className="flex size-full items-center justify-center rounded-[22.5%] bg-pink-500 text-white">
            <Music className="size-1/2" />
          </div>
        </GlassDockItem>
        <GlassDockSeparator />
        <GlassDockItem label="Calendar">
          <div className="flex size-full items-center justify-center rounded-[22.5%] bg-red-500 text-white">
            <Calendar className="size-1/2" />
          </div>
        </GlassDockItem>
        <GlassDockItem label="Files">
          <div className="flex size-full items-center justify-center rounded-[22.5%] bg-amber-500 text-white">
            <Folder className="size-1/2" />
          </div>
        </GlassDockItem>
        <GlassDockItem label="Settings">
          <div className="flex size-full items-center justify-center rounded-[22.5%] bg-neutral-600 text-white">
            <Settings className="size-1/2" />
          </div>
        </GlassDockItem>
      </GlassDock>
    </div>
  );
}