Dock

Navigation 119

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

"use client"

import { useEffect, useState } from "react"
import {
  BlocksIcon,
  CircleIcon,
  HexagonIcon,
  OctagonIcon,
  PentagonIcon,
  SquareIcon,
  TriangleIcon,
} from "lucide-react"

import {
  Dock,
  DockCard,
  DockCardInner,
  DockDivider,
} from "@/components/ui/dock"

function useIsMobile() {
  const [isMobile, setIsMobile] = useState(false)

  useEffect(() => {
    const userAgent = navigator.userAgent
    const isSmall = window.matchMedia("(max-width: 768px)").matches
    const isMobileUserAgent = Boolean(
      /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.exec(
        userAgent
      )
    )

    const isDev = process.env.NODE_ENV !== "production"
    if (isDev) {
      setIsMobile(isSmall || isMobileUserAgent)
    } else {
      setIsMobile(isSmall && isMobileUserAgent)
    }
  }, [])

  return isMobile
}

const gradients = [
  "https://cdn.21st.dev/assets/mirror/b4/b4eae7779902654cf559d16d7e6e701fcf52c35cddc7f5c4a97e61e20fa7956e.jpg",
  "https://cdn.21st.dev/assets/mirror/95/951d0d27c951332b4d54d01798e023e662ac1961ff9f7cf8f1fb38daff726abb.jpg",
  "https://cdn.21st.dev/assets/mirror/8f/8fb4f63b47b3ec4a154b86ac33d13e86e6aab6a07464a1aada2235a4173700d4.jpg",
  "https://cdn.21st.dev/assets/mirror/cf/cfb6ea812402818fafc7efbdb0ba88ff2db16463dc890fd9b312523bbdcfde99.jpg",
  "https://cdn.21st.dev/assets/mirror/a8/a821eba68bc26d00cb18a8351d43f48808f41c81c72fce1daebf05566c50562f.jpg",
  "https://cdn.21st.dev/assets/mirror/1e/1ec396cbf431a1aa66952975fde16613752f1f664bcda56261afc0956ef0cf71.jpg",
  null,
  "https://cdn.21st.dev/assets/mirror/02/02a204486bed734d6744f0d71c2eb8105ec66836590c4c4aebc7f710d435e999.jpg",
]

const DockAnimationDemo = () => {
  const openIcons = [
    <CircleIcon key="circle" className="h-8 w-8 fill-black stroke-black rounded-full" />,
    <TriangleIcon key="triangle" className="h-8 w-8 fill-black stroke-black rounded-full" />,
    <SquareIcon key="square" className="h-8 w-8 fill-black stroke-black rounded-full" />,
    <PentagonIcon key="pentagon" className="h-8 w-8 fill-black stroke-black rounded-full" />,
    <HexagonIcon key="hexagon" className="h-8 w-8 fill-black stroke-black rounded-full" />,
    <OctagonIcon key="octagon" className="h-8 w-8 fill-black stroke-black rounded-full" />,
    null,
    <BlocksIcon key="blocks" className="h-8 w-8 fill-black stroke-black rounded-full" />,
  ]

  const isMobile = useIsMobile()

  const responsiveOpenIcons = isMobile
    ? openIcons.slice(3)
    : openIcons
  const responsiveGradients = isMobile
    ? gradients.slice(3)
    : gradients

  return (
    <div className="flex items-center justify-center">
      <Dock>
        {responsiveGradients.map((src, index) =>
          src ? (
            <DockCard key={src || `divider-${index}`} id={`${index}`}>
              <DockCardInner src={src} id={`${index}`}>
                {responsiveOpenIcons[index]}
              </DockCardInner>
            </DockCard>
          ) : (
            <DockDivider key={`divider-${index}`} />
          )
        )}
      </Dock>
    </div>
  )
}

export default DockAnimationDemo