Dock

npx shadcn@latest add https://ui.saasflare.io/r/dock.json

pnpm add @saasflare/ui

"use client"import {    Dock,    DockItem,    InfoIcon,    MagnifyingGlassIcon,    MonitorIcon,    MoonIcon,    SunIcon,} from "@saasflare/ui"/** A macOS-style dock whose icons magnify on mouse proximity. */export function Demo() {    return (        <Dock>            <DockItem label="Search">                <MagnifyingGlassIcon className="size-6" />            </DockItem>            <DockItem label="Displays">                <MonitorIcon className="size-6" />            </DockItem>            <DockItem label="Light">                <SunIcon className="size-6" />            </DockItem>            <DockItem label="Dark">                <MoonIcon className="size-6" />            </DockItem>            <DockItem label="About">                <InfoIcon className="size-6" />            </DockItem>        </Dock>    )}

"use client"import {    Dock,    DockItem,    ArrowUpIcon,    CheckCircleIcon,    MagnifyingGlassIcon,    MonitorIcon,} from "@saasflare/ui"/** A dock with a wider magnification range and reach for a more dramatic effect. */export function Demo() {    return (        <Dock magnification={1.8} distance={140}>            <DockItem label="Overview">                <MonitorIcon className="size-6" />            </DockItem>            <DockItem label="Search">                <MagnifyingGlassIcon className="size-6" />            </DockItem>            <DockItem label="Deploys">                <ArrowUpIcon className="size-6" />            </DockItem>            <DockItem label="Checks">                <CheckCircleIcon className="size-6" />            </DockItem>        </Dock>    )}