dock

Buttons 337

About

Here is dock component

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

import { Dock, DockIcon } from "@/components/ui/dock"

export default function DockDemo() {
  const dockItems = [
    {
      src: "https://cdn.21st.dev/assets/mirror/6f/6ffe8862a207469e804836177b9622a1f47904bab15cece11868ca01eacd3cd8.webp",
      name: "TailwindCSS",
      href: "#tailwindcss",
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/63/63555a4f7d515a275fd69c421ebcd798c44b516036303d2c5abe98c614578a26.webp",
      name: "Edge",
      href: "#linear",
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/21/21f5b7e9db250fc2521942aa4952d5616993e67d8b6dea8941cc6b3eb08bfd31.webp",
      name: "Motion",
      href: "#motion",
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/02/02793444e8309b172aed2a5d87aa4046792f93de9866698e8ed834c52edf07f3.webp",
      name: "React",
      href: "#react",
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/84/84f06477b8e8df8bc25fe3469e49f83f11dc4ef165f21adb02f017f4b82facef.webp",
      name: "Linear",
      href: "#linear",
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/37/37821e229ba0b03ebf3f433cfdc99b7ca1e25963cbc29b48649504253c6f956a.webp",
      name: "Drizzle ORM",
      href: "#drizzle-orm",
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/98/98832f467c99132a5b9f94567d8a0433fefd75d2131b8fd8637ba6733a191ee0.webp",
      name: "Deepseek",
      href: "#linear",
    },
  ]

  return (
    <Dock>
      {dockItems.map((item, index) => (
        <DockIcon
          key={index}
          src={item.src}
          name={item.name}
          href={item.href}
        />
      ))}
    </Dock>
  )
}