Dock

PreviewCode

Dock

@/demos/DockDemo.tsx

import { Home, Mail, Pencil } from 'lucide-solid'
import { buttonVariants } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { Icons } from '@/demos/shared/icons'
import { cn } from '@/lib/utils'
import { Dock, DockIcon } from '@/registry/magicui/dock'

export function DockDemo() {
  return (
    <div class="flex flex-col items-center justify-center">
      <span class="
        pointer-events-none bg-linear-to-b from-black to-gray-300/80
        bg-clip-text text-center text-8xl! leading-none font-semibold
        whitespace-pre-wrap text-transparent
        dark:from-white dark:to-slate-900/10
      "
      >
        Dock
      </span>
      <Dock direction="middle">
        <DockIcon>
          <Tooltip>
            <TooltipTrigger aria-label="Home">
              <span
                class={cn(
                  buttonVariants({ variant: 'ghost', size: 'icon' }),
                  'size-12 rounded-full',
                )}
              >
                <Home class="size-4" />
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>Home</p>
            </TooltipContent>
          </Tooltip>
        </DockIcon>
        <DockIcon>
          <Tooltip>
            <TooltipTrigger aria-label="Blog">
              <span
                class={cn(
                  buttonVariants({ variant: 'ghost', size: 'icon' }),
                  'size-12 rounded-full',
                )}
              >
                <Pencil class="size-4" />
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>Blog</p>
            </TooltipContent>
          </Tooltip>
        </DockIcon>
        <div class="mx-1 h-full w-px bg-border" />
        <DockIcon>
          <Tooltip>
            <TooltipTrigger aria-label="GitHub">
              <span
                class={cn(
                  buttonVariants({ variant: 'ghost', size: 'icon' }),
                  'size-12 rounded-full',
                )}
              >
                <Icons.gitHub class="size-4" />
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>GitHub</p>
            </TooltipContent>
          </Tooltip>
        </DockIcon>
        <DockIcon>
          <Tooltip>
            <TooltipTrigger aria-label="LinkedIn">
              <span
                class={cn(
                  buttonVariants({ variant: 'ghost', size: 'icon' }),
                  'size-12 rounded-full',
                )}
              >
                <Icons.linkedin class="size-4" />
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>LinkedIn</p>
            </TooltipContent>
          </Tooltip>
        </DockIcon>
        <DockIcon>
          <Tooltip>
            <TooltipTrigger aria-label="X">
              <span
                class={cn(
                  buttonVariants({ variant: 'ghost', size: 'icon' }),
                  'size-12 rounded-full',
                )}
              >
                <Icons.x class="size-4" />
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>X</p>
            </TooltipContent>
          </Tooltip>
        </DockIcon>
        <DockIcon>
          <Tooltip>
            <TooltipTrigger aria-label="Send Email">
              <span
                class={cn(
                  buttonVariants({ variant: 'ghost', size: 'icon' }),
                  'size-12 rounded-full',
                )}
              >
                <Mail class="size-4" />
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>Send Email</p>
            </TooltipContent>
          </Tooltip>
        </DockIcon>
      </Dock>
    </div>
  )
}

Installation

pnpm

bash pnpm dlx shadcn@latest add @magicui-solid/dock

bun

bash bunx shadcn@latest add @magicui-solid/dock

yarn

bash yarn dlx shadcn@latest add @magicui-solid/dock

npm

bash npx shadcn@latest add @magicui-solid/dock

Examples

Custom Direction

PreviewCode

@/demos/DockDemoDirection.tsx

import { Icons } from '@/demos/shared/icons'
import { Dock, DockIcon } from '@/registry/magicui/dock'

export function DockDemoDirection() {
  return (
    <div class="flex flex-col items-center justify-center">
      <Dock direction="top">
        <DockIcon>
          <Icons.gitHub class="size-4" />
        </DockIcon>
        <DockIcon>
          <Icons.googleDrive class="size-4" />
        </DockIcon>
        <DockIcon>
          <Icons.notion class="size-4" />
        </DockIcon>
        <DockIcon>
          <Icons.whatsapp class="size-4" />
        </DockIcon>
      </Dock>
    </div>
  )
}

Custom magnification

PreviewCode

@/demos/DockDemoCustom.tsx

import { Icons } from '@/demos/shared/icons'
import { Dock, DockIcon } from '@/registry/magicui/dock'

export function DockDemoCustom() {
  return (
    <div class="flex flex-col items-center justify-center">
      <Dock iconMagnification={60} iconDistance={100}>
        <DockIcon class="
          bg-black/10
          dark:bg-white/10
        "
        >
          <Icons.gitHub class="size-full" />
        </DockIcon>
        <DockIcon class="
          bg-black/10
          dark:bg-white/10
        "
        >
          <Icons.googleDrive class="size-full" />
        </DockIcon>
        <DockIcon class="
          bg-black/10
          dark:bg-white/10
        "
        >
          <Icons.notion class="size-full" />
        </DockIcon>
        <DockIcon class="
          bg-black/10
          dark:bg-white/10
        "
        >
          <Icons.whatsapp class="size-full" />
        </DockIcon>
      </Dock>
    </div>
  )
}

Import

import { Dock, DockIcon } from "@/components/magicui/dock";

Usage

<Dock>
  <DockIcon>
    <Home class="size-6" />
  </DockIcon>
  <DockIcon>
    <Mail class="size-6" />
  </DockIcon>
</Dock>

Props

Dock

Prop	Type	Default	Description
class	string	-	Optional CSS class name to apply custom styles.
iconSize	number	40	Size of the icons in the dock.
iconMagnification	number	60	Size of the icons when magnified.
disableMagnification	boolean	false	Whether to disable magnification on hover.
iconDistance	number	140	Distance from the cursor for magnification effect.
direction		middle	Vertical alignment of the icons within the dock.
children	JSX.Element	-	Content to be displayed in the dock.

DockIcon

Prop	Type	Default	Description
class	string	-	Optional CSS class name to apply custom styles.
size	number	40	Size of the icon when not magnified.
magnification	number	60	Size of the icon when magnified.
disableMagnification	boolean	false	Whether to disable magnification on hover.
distance	number	140	Distance from the cursor for magnification effect.
mouseX	Accessor<number>	-	Mouse X position for magnification.
children	JSX.Element	-	Icon content to be displayed.

Credits

• Credits to Build UI for this fantastic component
• Credits to Ritesh Bucha for finding and improving it

Original:

magicui.design/docs/components/dock