{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"browser-window","title":"Browser Window","description":"A compact browser chrome frame for screenshots and previews.","files":[{"path":"ui/browser-window.tsx","type":"registry:ui","content":"import type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype BrowserWindowProps = React.ComponentProps<\"div\"> & {\n  address?: React.ReactNode;\n  addressHref?: string;\n};\n\nfunction BrowserWindow({\n  address = \"about:blank\",\n  addressHref,\n  className,\n  children,\n  ...props\n}: BrowserWindowProps) {\n  return (\n    <div\n      data-slot=\"browser-window\"\n      className={cn(\n        \"overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm\",\n        className,\n      )}\n      {...props}\n    >\n      <div\n        data-slot=\"browser-window-toolbar\"\n        className=\"flex h-9 items-center gap-2 border-b border-zinc-200 bg-zinc-100 px-2 dark:border-zinc-800 dark:bg-zinc-900\"\n      >\n        <div\n          aria-hidden=\"true\"\n          data-slot=\"browser-window-controls\"\n          className=\"flex shrink-0 items-center gap-1.5\"\n        >\n          <div className=\"size-2 rounded-full bg-[#FF5F57]\" />\n          <div className=\"size-2 rounded-full bg-[#FEBC2E]\" />\n          <div className=\"size-2 rounded-full bg-[#28C840]\" />\n        </div>\n        <div\n          aria-label=\"Address\"\n          data-slot=\"browser-window-address\"\n          className=\"flex min-w-0 flex-1 items-center rounded-sm bg-zinc-200 px-2 py-[3px] dark:bg-zinc-800\"\n        >\n          {addressHref ? (\n            <a\n              href={addressHref}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              className=\"block w-full truncate text-center text-[10px] font-medium text-zinc-500 dark:text-zinc-400\"\n            >\n              {address}\n            </a>\n          ) : (\n            <span className=\"block truncate\">{address}</span>\n          )}\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n}\n\nfunction BrowserWindowContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"browser-window-content\"\n      className={cn(\"overflow-hidden bg-background\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BrowserWindowImage({ className, alt, ...props }: React.ComponentProps<\"img\">) {\n  return (\n    <img\n      data-slot=\"browser-window-image\"\n      alt={alt}\n      className={cn(\"block size-full object-cover\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { BrowserWindow, BrowserWindowContent, BrowserWindowImage };","target":"@ui/browser-window.tsx"}],"type":"registry:ui"}