Animated Dock

Navigation 658

About

A dock with animated icons that grow on hover.

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

Code

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

Usage.tsx

import { Github, Twitter, Youtube, Flower } from 'lucide-react'
import { AnimatedDock } from "@/components/ui/animated-dock"

const Demo = () => {
    return (
        <>
            <AnimatedDock
                items={[
                    {
                        link: "https://github.com/preetsuthar17",
                        target: "_blank",
                        Icon: <Github size={22} />,
                    },
                    {
                        link: "https://x.com/preetsuthar17",
                        target: "_blank",
                        Icon: <Twitter size={22} />,
                    },
                    {
                        link: "https://www.youtube.com/@preetsuthar17",
                        target: "_blank",
                        Icon: <Youtube size={22} />,
                    },
                    {
                        link: "https://github.com/preetsuthar17/hextaui",
                        target: "_blank",
                        Icon: <Flower size={22} />,
                    },
                ]}
            />
        </>
    )
}

export {Demo}