Signature / Molecule

Glass Dock

macOS-style dock with proximity magnification and frosted glass surface.

Edit on GitHub

pnpm dlx @glinui/cli@latest add glass-dock

Good morning, Ava

3 reviews waiting and a standup at 10:30.

Installation$

Install from

pnpm dlx @glinui/cli@latest add glass-dock

Prefer the package?

Usage$

GlassDock is a "use client" component. Pass an array of items with id, icon, label, and optional onClick. Icons magnify as the cursor approaches.

Examples$

Variants$

GlassDock is glass by default, with a readable opacity floor so the icons stay legible on any backdrop. It also accepts the shared vocabulary: glinr renders the tiles as raised keys, plain is flat and shadcn-like. Glass looks frosted only over a colourful or photographic backdrop: pick one in the stage header.

"use client"
import { GlassDock } from "@glinui/ui"
import { House, Gear, User } from "@phosphor-icons/react"


const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const


export function GlassDockVariantsDemo() {
const items = [
  { id: "home", icon: <House className="size-full" />, label: "Home" },
  { id: "settings", icon: <Gear className="size-full" />, label: "Settings" },
  { id: "profile", icon: <User className="size-full" />, label: "Profile" }
]
return (
  <div className="grid gap-4 sm:grid-cols-2">
    {variants.map((variant) => (
      <GlassDock key={variant} variant={variant} iconSize={40} items={items} />
    ))}
  </div>
)
}

High Magnification$

"use client"
import { GlassDock } from "@glinui/ui"
import { FolderOpen, Camera, MusicNote, FilmStrip, Globe, ChatCircle } from "@phosphor-icons/react"


export function GlassDockMagDemo() {
return (
  <div className="flex items-center justify-center p-12">
    <GlassDock
      magnification={2}
      distance={150}
      iconSize={56}
      items={[
        { id: "files", icon: <FolderOpen className="size-full" />, label: "Files" },
        { id: "photos", icon: <Camera className="size-full" />, label: "Photos" },
        { id: "music", icon: <MusicNote className="size-full" />, label: "Music" },
        { id: "video", icon: <FilmStrip className="size-full" />, label: "Video" },
        { id: "web", icon: <Globe className="size-full" />, label: "Browser" },
        { id: "messages", icon: <ChatCircle className="size-full" />, label: "Messages" }
      ]}
    />
  </div>
)
}

Accessibility$

Renders with role="toolbar" and aria-label="Dock".
Each item is a <button> with aria-label set to the item label.
Item tooltips appear on hover using the title attribute.

Reduced Motion$

When prefers-reduced-motion: reduce is active, the magnification effect is disabled, all items remain at their base size.

API Reference$

Prop	Type	Required	Default	Description
`distance`	`number`	No	`120`	Distance in px at which magnification starts
`iconSize`	`number`	No	`48`	Base icon size in px
`items`	`GlassDockItem[]`	Yes	`-`	Dock items
`magnification`	`number`	No	`1.6`	Maximum magnification scale
`position`	`"bottom" \| "top" \| "left" \| "right"`	No	`"bottom"`	Position
`variant`	`PanelVariantProp`	No	`-`	Surface look. Glass by default (its identity, with a readable opacity floor). Pass `glinr`, `plain`, `solid`, `soft`, `outline`, `ghost` or `gradient` for a crisp dock.

Source$

import { GlassDock } from "@glinui/ui"

packages/ui/src/components/glass-dock.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/glass-dock.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

GlassDockProps

`GlassDockProps`

Prop	Type	Required	Default	Description
`distance`	`number`	No	`120`	Distance in px at which magnification starts
`iconSize`	`number`	No	`48`	Base icon size in px
`items`	`GlassDockItem[]`	Yes	`-`	Dock items
`magnification`	`number`	No	`1.6`	Maximum magnification scale
`position`	`"bottom" \| "top" \| "left" \| "right"`	No	`"bottom"`	Position
`variant`	`PanelVariantProp`	No	`-`	Surface look. Glass by default (its identity, with a readable opacity floor). Pass `glinr`, `plain`, `solid`, `soft`, `outline`, `ghost` or `gradient` for a crisp dock.