Signature / Moleculestable

Glass Dock

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

@glinui/uiComponent: glass-dock

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

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

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.

Basic$

TSX

1"use client"
2import { GlassDock } from "@glinui/ui"
3import { Home, Search, Settings, User, Mail } from "lucide-react"
4
5export function GlassDockDemo() {
6return (
7  <div className="flex items-center justify-center p-12">
8    <GlassDock
9      items={[
10        { id: "home", icon: <Home className="size-full" />, label: "Home" },
11        { id: "search", icon: <Search className="size-full" />, label: "Search" },
12        { id: "settings", icon: <Settings className="size-full" />, label: "Settings" },
13        { id: "profile", icon: <User className="size-full" />, label: "Profile" },
14        { id: "mail", icon: <Mail className="size-full" />, label: "Mail" }
15      ]}
16    />
17  </div>
18)
19}

Examples$

High Magnification$

TSX

1"use client"
2import { GlassDock } from "@glinui/ui"
3import { FolderOpen, Camera, Music, Film, Globe, MessageCircle } from "lucide-react"
4
5export function GlassDockMagDemo() {
6return (
7  <div className="flex items-center justify-center p-12">
8    <GlassDock
9      magnification={2}
10      distance={150}
11      iconSize={56}
12      items={[
13        { id: "files", icon: <FolderOpen className="size-full" />, label: "Files" },
14        { id: "photos", icon: <Camera className="size-full" />, label: "Photos" },
15        { id: "music", icon: <Music className="size-full" />, label: "Music" },
16        { id: "video", icon: <Film className="size-full" />, label: "Video" },
17        { id: "web", icon: <Globe className="size-full" />, label: "Browser" },
18        { id: "messages", icon: <MessageCircle className="size-full" />, label: "Messages" }
19      ]}
20    />
21  </div>
22)
23}

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

Source$

TSX

1import { 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-02-19T17:59:28.468Z · 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