Loading…

Browser Tabs

beta

A miniature browser window whose tabs are a real tablist: a card-coloured leaf springs under the active tab, and tabs reorder by drag or keyboard.

Navigation
2 files
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add browser-tabs

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { BrowserTabs } from "@/components/ui/browser-tabs";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Controlled
Right To Left

API

Generated from the component's own types, so a prop cannot appear here without existing.

<BrowserTabs>

Prop	Type	Default
`tabs` (required)	`BrowserTab[]`	—
`bounce` Spring overshoot for the leaf and tabs, 0–30.	`number`	`15`
`corner` Window corner radius in px; the tab's top radius derives from it.	`number`	`20`
`defaultOrder` Initial order when uncontrolled. Defaults to the order of `tabs`.	`string[]`	—
`defaultValue` The initially active tab when uncontrolled. Defaults to the first tab.	`string`	—
`formatMove` The live-region message after a move. `position` is 1-based.	`(tab: BrowserTab, position: number, total: number) => string`	`defaultFormatMove`
`labels`	`Partial<BrowserTabsLabels>`	—
`onBack` Makes the back glyph a real button. Without a handler it is decoration.	`() => void`	—
`onForward`	`() => void`	—
`onOrderChange` Called with the new order after a drag swap or a keyboard move.	`(order: string[]) => void`	—
`onReload`	`() => void`	—
`onValueChange`	`(value: string) => void`	—
`order` Tab values in visual order (controlled). Unknown values are dropped, missing ones appended.	`string[]`	—
`renderPanel` Renders the page for the active tab.	`(tab: BrowserTab) => ReactNode`	—
`stroke` Adds a 1px hairline to the window and the active tab.	`boolean`	`false`
`tabWidth` Tab width in px.	`number`	`100`
`tone`	`"default" \| "inverted"`	`"default"`
`value` The active tab's value (controlled).	`string`	—
`children` Page content for the active tab. Ignored when `renderPanel` is given.	`ReactNode`	—

Plus every attribute of <div> except children, defaultValue, onChange.

Accessibility

The strip is role="tablist" (named by labels.tabList) of role="tab" buttons with aria-selected, aria-controls and aria-posinset/aria-setsize reporting each tab's visual position; one role="tabpanel" is labelled by the active tab. Left/Right (mirrored in right-to-left layouts) move focus and select with wrap-around, Home/End jump to the ends. Alt+Left/Right and Ctrl+Shift+PageUp/PageDown move the focused tab one slot, and every move — keyboard or drag — is announced through a polite live region ("Moved Finds to position 1 of 2"), so dragging is never the only way to reorder. Back, forward and reload are decorative (aria-hidden) unless onBack/onForward/onReload are given, when they become named buttons. The leaf and its ears are aria-hidden; the springs are CSS transitions that settle at once under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

tabs

BrowserTab[]

—

bounce

Spring overshoot for the leaf and tabs, 0–30.

number

15

corner

Window corner radius in px; the tab's top radius derives from it.

number

20

defaultOrder

Initial order when uncontrolled. Defaults to the order of tabs.

string[]

—

defaultValue

The initially active tab when uncontrolled. Defaults to the first tab.

string

—

formatMove

The live-region message after a move. position is 1-based.

(tab: BrowserTab, position: number, total: number) => string

defaultFormatMove

labels

Partial<BrowserTabsLabels>

—

onBack

Makes the back glyph a real button. Without a handler it is decoration.

() => void

—

onForward

() => void

—

onOrderChange

Called with the new order after a drag swap or a keyboard move.

(order: string[]) => void

—

onReload

() => void

—

onValueChange

(value: string) => void

—

order

Tab values in visual order (controlled). Unknown values are dropped, missing ones appended.

string[]

—

renderPanel

Renders the page for the active tab.

(tab: BrowserTab) => ReactNode

—

stroke

Adds a 1px hairline to the window and the active tab.

boolean

false

tabWidth

Tab width in px.

number

100

tone

"default" | "inverted"

"default"

value

The active tab's value (controlled).

string

—

children

Page content for the active tab. Ignored when renderPanel is given.

ReactNode

—