KQ-1235 · TAB/BROWSER

Tab Browser

A browser window around a small site that behaves like one: tabs select on press and drag to reorder, the dragged tab lifting on springs.flick and following the finger 1:1 while the tabs it passes slide aside on springs.glide, each tab keeps its own Back and Forward history, page links navigate in the tab (or open a background tab with Ctrl, Cmd or the middle button), and a link or a host navigation types the new address into the bar from where it first differs. With loading on, a bar runs across under the toolbar on an ease-out for a seeded time per address while the tab's icon spins, then completes and fades as the new page cross-fades in with a short rise on glide; the light and dark skins wear those themes whatever the page does, and glass frosts the chrome over the page scrolling beneath it. The tabs are a tablist whose arrows move and select, Shift with an arrow moves a tab and Delete closes it, the address bar is a real input that takes an address, a path or a page's name, and Alt with an arrow goes back and forward.

KQ-1235 · TAB/BROWSER

Fieldline Rail

Every train, on time.

Live departures for 42 stations along the coast.

See routes Fares

On time: 98.4%
Stations: 42
Lines: 4

Ticket	Peak	Off-peak
Single	£4.20	£3.10
Return	£7.80	£5.60
Week	£31.00	£31.00

fieldline.app · Fieldline Rail

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/tab-browser

Props

pages: { url: string; title: string; content: React.ReactNode; icon?: React.ReactNode }[]; default —; The site the browser can show; the first page is home, where new tabs open. Plain <a href> links to these addresses (with or without the protocol, or as /paths) navigate inside the frame; any other address shows a built-in nothing-here page, and nothing ever leaves the frame.
label: string; default "Browser"; The browser's accessible name.
tabs: number; default 3; How many tabs are open, 1 to 4, on the first pages in order. Changing it opens or closes tabs at the end of the strip (never the one in use); the visitor can still open up to six and close them.
value / defaultValue: string; default the first page's URL; The address: the active tab's URL (controlled / initial). A new value from the host navigates the active tab there, typing it into the bar.
onValueChange: (url: string) => void; default —; Fires from the link, address bar, Back, Forward or tab switch that asked for a new address. Controlled, the navigation is carried out when the host's value arrives, so a refused address never shows.
skin: "light" | "dark" | "glass"; default "glass"; Light or dark chrome and pages whatever the page's theme, or translucent, blurred chrome in the page's theme with the page scrolling beneath it.
loading: boolean; default true; Navigations take a moment: a loading bar, a spinning tab icon, then the page cross-fades in. Off, pages change at once.
sound: boolean; default false; Play clicks for the visitor's presses: tabs, each slot a dragged tab crosses, Back, Forward, Reload, links, Enter in the address bar, new and closed tabs. A page finishing loading is silent.
disabled: boolean; default false; Every control is disabled and the page is inert.
className: string; default —; Classes for the root, a container: the window is 8:5 below 480 px wide and 12:5 above.

Prop	Type	Default	Description
pages	{ url: string; title: string; content: React.ReactNode; icon?: React.ReactNode }[]	—	The site the browser can show; the first page is home, where new tabs open. Plain <a href> links to these addresses (with or without the protocol, or as /paths) navigate inside the frame; any other address shows a built-in nothing-here page, and nothing ever leaves the frame.
label	string	"Browser"	The browser's accessible name.
tabs	number	3	How many tabs are open, 1 to 4, on the first pages in order. Changing it opens or closes tabs at the end of the strip (never the one in use); the visitor can still open up to six and close them.
value / defaultValue	string	the first page's URL	The address: the active tab's URL (controlled / initial). A new value from the host navigates the active tab there, typing it into the bar.
onValueChange	(url: string) => void	—	Fires from the link, address bar, Back, Forward or tab switch that asked for a new address. Controlled, the navigation is carried out when the host's value arrives, so a refused address never shows.
skin	"light" \| "dark" \| "glass"	"glass"	Light or dark chrome and pages whatever the page's theme, or translucent, blurred chrome in the page's theme with the page scrolling beneath it.
loading	boolean	true	Navigations take a moment: a loading bar, a spinning tab icon, then the page cross-fades in. Off, pages change at once.
sound	boolean	false	Play clicks for the visitor's presses: tabs, each slot a dragged tab crosses, Back, Forward, Reload, links, Enter in the address bar, new and closed tabs. A page finishing loading is silent.
disabled	boolean	false	Every control is disabled and the page is inert.
className	string	—	Classes for the root, a container: the window is 8:5 below 480 px wide and 12:5 above.