shadcn/app/public/registry/styles/default/menu-dock.json

{
  "name": "menu-dock",
  "description": "Dock-style menu with icons",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "name": "menu-dock.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface MenuDockItem {\n  icon: React.ReactNode\n  label: string\n  onClick?: () => void\n  active?: boolean\n}\n\nexport interface MenuDockProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: MenuDockItem[]\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst MenuDock = React.forwardRef<HTMLDivElement, MenuDockProps>(\n  ({ className, items, orientation = \"horizontal\", ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex gap-2 rounded-full border bg-background/95 p-2 shadow-lg backdrop-blur\",\n          orientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n          className\n        )}\n        {...props}\n      >\n        {items.map((item, index) => (\n          <button\n            key={index}\n            onClick={item.onClick}\n            className={cn(\n              \"group relative flex items-center justify-center rounded-full p-3 transition-colors hover:bg-accent\",\n              item.active &&\n                \"bg-primary text-primary-foreground hover:bg-primary/90\"\n            )}\n            title={item.label}\n          >\n            {item.icon}\n            <span className=\"sr-only\">{item.label}</span>\n            <span className=\"absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-popover px-2 py-1 text-xs text-popover-foreground opacity-0 transition-opacity group-hover:opacity-100\">\n              {item.label}\n            </span>\n          </button>\n        ))}\n      </div>\n    )\n  }\n)\nMenuDock.displayName = \"MenuDock\"\n\nexport { MenuDock }\n"
    }
  ],
  "type": "components:ui"
}