items

Array<{ icon: ReactNode; label: string; onClick: () => void; badgeCount?: number }>

-

Array of items rendered in the dock. Each item requires an icon, label, and optional onClick handler and badgeCount.

Required

magnification

number

70

Maximum size (px) items grow to on hover via spring animation.

Optional

baseItemSize

number

50

Default idle size (px) of each dock item.

Optional

distance

number

200

Radius (px) over which the magnification effect spreads to neighbouring items.

Optional

panelHeight

number

64

Dock panel height (px) in the idle (non-hovered) state.

Optional

dockHeight

number

256

Dock panel max height (px) when hovered and fully expanded.

Optional

spring

{ mass: number; stiffness: number; damping: number }

{ mass: 0.1, stiffness: 150, damping: 12 }

Framer Motion spring physics applied to all size and height transitions.

Optional

gap

string

"gap-4"

Tailwind gap class controlling spacing between items (e.g. "gap-2", "gap-6").

Optional

blurBackground

boolean

false

Renders a frosted glass backdrop-blur panel behind the dock for a glassmorphism effect.

Optional

itemBackground

string

-

Tailwind background class for individual item circles (e.g. "bg-zinc-100 dark:bg-zinc-800").

Optional

itemBorderColor

string

-

Tailwind border-color class applied to each item (e.g. "border-zinc-300").

Optional

borderRadius

string

"rounded-full"

Tailwind border-radius class for items (e.g. "rounded-xl" for square icons).

Optional

badgeColor

string

"bg-red-500"

Tailwind background class for the notification badge (e.g. "bg-violet-600").

Optional

hideLabels

boolean

false

When true, suppresses the animated hover tooltip labels on all items.

Optional

labelPosition

"top" | "bottom"

"top"

Controls whether the hover label appears above or below the icon.

Optional

labelBackground

string

"bg-[#060606]"

Tailwind background class for the label tooltip bubble.

Optional

labelTextColor

string

"text-white"

Tailwind text-color class for label tooltip text.

Optional

showSeparator

boolean

false

Inserts a thin vertical divider line between items. Use with separatorIndex.

Optional

separatorIndex

number

-

Zero-based item index after which the separator line is placed.

Optional

className

string

-

Additional Tailwind classes applied to the dock panel container.

Optional

position

"bottom" | "top"

"bottom"

Dock screen position. Currently bottom is the primary animated orientation.

Optional

Dock

How to Import

Props

Basic Usage

Variants

Default Variant

On This Page

Contribute

Dock

How to Import

Props

Basic Usage

Variants

Default Variant

On This Page

Contribute

React Dock Component - Lightswind UI

Key Details of React Dock

Dock

How to Import

Props

Basic Usage

Variants

Default Variant

On This Page

Contribute

Dock

How to Import

Props

Basic Usage

Variants

Default Variant

On This Page

Contribute