Components

Dock

A macOS-style dock whose icons magnify as the cursor passes over them.

php artisan blatui:add dock

{{-- A roomy relative container gives the icons headroom to magnify upward. --}}
<div class="relative flex min-h-44 items-end justify-center pb-6">
    <x-ui.dock>
        <x-ui.dock-item icon="folder" label="Finder" :active="true" />
        <x-ui.dock-item icon="mail" label="Mail" href="#" />
        <x-ui.dock-item icon="calendar" label="Calendar" href="#" />
        <x-ui.dock-item icon="image" label="Photos" href="#" />
        <x-ui.dock-item icon="music" label="Music" href="#" />
        <x-ui.dock-item icon="settings" label="Settings" href="#" />
    </x-ui.dock>
</div>

API Reference

Props, slots and exposed methods for <x-ui.dock>.

Props

Prop	Type	Default	Description
`magnify`	`number`	`1.6`	The peak scale a tile reaches when the cursor is directly over it. Falls back to rest size (1) under prefers-reduced-motion.
`distance`	`int`	`120`	The influence radius in pixels over which the magnify effect eases back to rest size as the cursor moves away from a tile.

Slots

Slot	Description
`default`	The dock tiles. Place one <x-ui.dock-item> per entry (each takes `icon`, `label`, `href`, `active`); items read the dock scope to compute their own magnification.