import { Dock, DockIcon } from "@/components/ui/dock"
export function DockDemo() {
const dockItems = [
{
src: "https://cdn.badtz-ui.com/images/components/dock/tailwindcss-logo.webp",
name: "TailwindCSS",
href: "#tailwindcss",
},
{
src: "https://cdn.badtz-ui.com/images/components/dock/edge-logo.webp",
name: "Edge",
href: "#linear",
},
{
src: "https://cdn.badtz-ui.com/images/components/dock/motion-logo.webp",
name: "Motion",
href: "#motion",
},
{
src: "https://cdn.badtz-ui.com/images/components/dock/react-logo.webp",
name: "React",
href: "#react",
},
{
src: "https://cdn.badtz-ui.com/images/components/dock/linear-logo.webp",
name: "Linear",
href: "#linear",
},
{
src: "https://cdn.badtz-ui.com/images/components/dock/drizzle-orm-logo.webp",
name: "Drizzle ORM",
href: "#drizzle-orm",
},
{
src: "https://cdn.badtz-ui.com/images/components/dock/deepseek-logo.webp",
name: "Deepseek",
href: "#linear",
},
]
return (
<Dock>
{dockItems.map((item, index) => (
<DockIcon
key={index}
src={item.src}
name={item.name}
href={item.href}
/>
))}
</Dock>
)
}
pnpm dlx shadcn@latest add https://badtz-ui.com/r/dock.json
import { Dock, DockIcon } from "@/components/ui/dock";<Dock>
<DockIcon
src="/images/components/dock/tailwindcss-logo.webp"
name="TailwindCSS"
href="#tailwindcss"
/>
<DockIcon
name="Edge"
src="/images/components/dock/edge-logo.webp"
href="#linear"
/>
<DockIcon
name="Motion"
src="/images/components/dock/motion-logo.webp"
href="#motion"
/>
...
</Dock>You can also pass icons as children if you don't want to use an image.
<Dock className="[&_svg]:size-6">
<DockIcon name="Settings" href="#setings">
<SettingsIcon>
</DockIcon>
...
</Dock>Dock props.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
children? | React.ReactNode | - |
maxAdditionalSize? | number | 5 |
iconSize? | number | 55 |
DockIcon props.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
src? | string | - |
href? | string | - |
name? | string | - |
handleIconHover? | (e: React.MouseEvent<HTMLLIElement>) => void | - |
children? | React.ReactNode | - |
iconSize? | number | 55 |
We are not affiliated with any of the brands whose logos are used in this component. These logos are displayed for demonstration purposes only.
On This Page