Dock

Pro

Bottom tab bar where a soft glow glides to the selected tab. Choose a floating glass pill, a full-width bar or a joined strip, with badges and an optional action button.

Preview

Installation

npx @lumioui/cli add pro/dock

Usage

import { Dock } from "@/components/ui/dock/dock";
<Dock />

Examples

Attached bar

A full-width navigation bar on a banking home screen: labels always on, a pool of light glides behind the active icon, and the tab's header switches on a band after the light lands.

Icon-only

An icon-only glass pill over a full-bleed activity photo: a pool of red light and full ink alone carry the selection; idle glyphs sit at 55%.

Floating

A floating tab bar over a music library: a glass pill whose selected tab holds a gliding pool of pink light, with search as its own glass circle.

Fused

A food-delivery tab bar welded into one strip: the strip's top seam brightens under the active tab as a pool of orange light glides beneath it, and the header switches on after the light lands.

API reference

Prop Type Default
items* DockItem[] —
value* string

Currently selected item value.

 —
onValueChange* (value: string) => void —
variant "floating" | "attached" | "fused"

"floating" renders the detached glass pill (default); "attached" a full-width bar; "fused" one welded strip whose top seam brightens under the active tab. In every variant the selection is a pool of the accent's light that glides between slots.

 "floating"
labels "active" | "always" | "never"

Which items show their label. Default "active". Label space is always reserved (unless "never") so icons never jump when selection moves.

 "active"
action DockAction

Prominent action disc appended at the end of the bar.

 —
haptic "selection" | "light" | false

Haptic on selection. Default "selection".

 "selection"
safeArea boolean

Lift above / pad past the home indicator. Default true.

 true
className string —