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>
)
}
Part of Badtz UI — browse the full library on 21st.dev.