PremiumNew

DockBar

macOS-style dock bar with glass morphism background, hover scale animations, and tooltip labels.

Navigation & Layoutdocktoolbarmacosnavigation

Dependencies

shadcn/ui components needed:

npx shadcn@latest add tooltipnpx shadcn@latest add button

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Home, Search, Folder, Image, Music, Settings, Mail, Calendar } from 'lucide-react';
4import { Button } from '@/components/ui/button';
5import {
6  Tooltip,
7  TooltipContent,
8  TooltipProvider,
9  TooltipTrigger,
10} from '@/components/ui/tooltip';
11
12export default function DockBar() {
13  const dockItems = [
14    { icon: Home, label: 'Home', color: 'bg-blue-500' },
15    { icon: Search, label: 'Search', color: 'bg-purple-500' },
16    { icon: Folder, label: 'Files', color: 'bg-yellow-500' },
17    { icon: Image, label: 'Photos', color: 'bg-pink-500' },
18    { icon: Music, label: 'Music', color: 'bg-red-500' },
19    { icon: Mail, label: 'Mail', color: 'bg-sky-500' },
20    { icon: Calendar, label: 'Calendar', color: 'bg-green-500' },
21    { icon: Settings, label: 'Settings', color: 'bg-slate-500' },
22  ];
23
24  return (
25    <div className="flex items-end justify-center min-h-[250px] bg-gradient-to-b from-slate-800 to-slate-950 p-8">
26      <div className="relative">
27        <div className="flex items-end gap-2 px-4 py-3 rounded-2xl bg-white/10 backdrop-blur-xl border border-white/20 shadow-2xl">
28          <TooltipProvider>
29            {dockItems.map((item, idx) => (
30              <Tooltip key={idx}>
31                <TooltipTrigger asChild>
32                  <Button
33                    variant="ghost"
34                    size="icon"
35                    className={`w-12 h-12 rounded-xl ${item.color} text-white shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-125 hover:-translate-y-2 group`}
36                  >
37                    <item.icon className="w-6 h-6" />
38                    <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-white/80 rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
39                  </Button>
40                </TooltipTrigger>
41                <TooltipContent side="top" className="bg-slate-900 text-white border-slate-700">
42                  {item.label}
43                </TooltipContent>
44              </Tooltip>
45            ))}
46          </TooltipProvider>
47        </div>
48        <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 w-32 h-1 bg-white/20 rounded-full blur-sm" />
49      </div>
50    </div>
51  );
52}