Browser framePro

Browser chrome for product shots: real tab shapes with concave corners, back, forward and reload, an address field with the lock, and a loading bar, in light and dark chrome.

Markdown

On this page

ProTabs around real chatcn pages. Switch, close or open tabs, and reload to watch the loading bar.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/browser-frame

Usage

tsx

import { BrowserFrame } from "@/components/ui/chatcn/pro/browser-frame"

<BrowserFrame url="https://app.example.com/c/42" loading={0.6}>
  <YourPage />
</BrowserFrame>

The active tab and the toolbar are one surface, joined by concave corners, over a darker tab strip; the address field is recessed into the toolbar. It always shows the host in full and truncates the path first, so the part people read survives a narrow frame. Without tabs, pass title to show a single tab with the page title.

Examples

Every state

ProLoading with and without progress, a long URL, a minimal frame and gray dot controls.

Props

Prop	Type	Notes
`url`	`string`	Host in full, path dimmed. A lock for https
`tabs`	`{ id, title, icon? }[]`	A tab strip above the toolbar
`title`, `favicon`	`string`, `ReactNode`	Without `tabs`: one tab with this page title
`activeTab`, `defaultActiveTab`, `onActiveTabChange`		Controlled or uncontrolled
`onCloseTab`, `onNewTab`	`(id) => void`, `() => void`	Show close and new tab
`loading`	`boolean \| number`	Indeterminate, or 0 to 1
`onBack`, `onForward`, `onReload`	`() => void`	Enable the buttons
`navigation`	`boolean`	Hide back, forward and reload
`controls`	`"none" \| "dots" \| "glyphs"`	Default none. Dots are gray
`actions`	`ReactNode`	End of the toolbar
`width`, `height`	`number \| string`	Height of the page area. Default 420

Keyboard

Key	Action
`Tab`	Move through tabs, navigation and the page
`ArrowLeft`, `ArrowRight`	Move between tabs
`Enter`, `Space`	Activate the focused tab or button
`Delete`, `Backspace`	Close the focused tab, with `onCloseTab`

Accessibility

Tabs are a real tablist from Base UI Tabs, with the page as the active panel.
Icon buttons have labels: Back, Forward, Reload, Stop loading, New tab.
The tab list holds tabs and nothing else. A tab's close button sits beside it, never inside it, and is a pointer shortcut: keyboard and screen reader users close the focused tab with Delete (announced through aria-keyshortcuts).
The loading bar is a progressbar with a value when progress is known, and the frame is aria-busy while loading.
In RTL the toolbar mirrors and the arrows flip; the URL stays left to right.

Motion

The determinate bar grows with a 300 ms transform. The indeterminate bar slides on a loop and turns into a static partial bar under reduced motion.
Buttons press to 0.94 for 100 ms; hover only changes color.