Dock

Buttons 89

About

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

Code

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

Usage.tsx

"use client";

import { useState } from "react";
import {
  Calendar,
  Home,
  Mail,
  Music,
  Settings,
  Sparkles,
  Github,
} from "lucide-react";
import { Dock, DockItem, DockSeparator } from "@/components/ui/dock";

export default function DockPreview() {
  const [active, setActive] = useState("home");

  const items = [
    { id: "home", label: "Home", icon: Home },
    { id: "calendar", label: "Calendar", icon: Calendar },
    { id: "mail", label: "Mail", icon: Mail },
    { id: "music", label: "Music", icon: Music },
  ];

  return (
    <Dock>
      {items.map((item) => {
        const Icon = item.icon;

        return (
          <DockItem
            key={item.id}
            active={active === item.id}
            onClick={() => setActive(item.id)}
            aria-label={item.label}
          >
            <Icon className="h-5 w-5" />
          </DockItem>
        );
      })}

      <DockSeparator />

      <DockItem
        active={active === "github"}
        onClick={() => setActive("github")}
        aria-label="GitHub"
      >
        <Github className="h-5 w-5" />
      </DockItem>

      <DockItem
        active={active === "sparkles"}
        onClick={() => setActive("sparkles")}
        aria-label="Sparkles"
      >
        <Sparkles className="h-5 w-5" />
      </DockItem>

      <DockItem
        active={active === "settings"}
        onClick={() => setActive("settings")}
        aria-label="Settings"
      >
        <Settings className="h-5 w-5" />
      </DockItem>
    </Dock>
  );
}