🎉 Sora UI is now part of the shadcn/ui registry ecosystem.
Sora UI

Dock Nav

An Apple-style dock navigation bar with expanding icons and tooltips on hover.

Made by Axyl
Loading...

Installation

Usage

import { DockNav, type DockNavItem } from '@/components/sora-ui/effects/dock-nav';

const items: DockNavItem[] = [
  {
    label: 'Notion',
    href: 'https://notion.so',
    iconSrc: '/icons/notion.png',
    alt: 'Notion app icon',
  },
  {
    label: 'Figma',
    href: 'https://figma.com',
    icon: <FigmaIcon className="size-full" />,
  },
];

export default function Page() {
  return <DockNav items={items} className="max-w-4xl" />;
}

Props

PropTypeDefault
items?
DockNavItem[]
-
duration?
number
0.5
align?
"center" | "start" | "end"
"center"
className?
string
-

DockNavItem

PropTypeDefault
label?
string
-
href?
string
-
iconSrc?
string
-
icon?
ReactNode
-
alt?
string
-

Built by Axyl. The source code will be available on GitHub soon.

Last updated: 6/7/2026