Selection
BrowserTabs
A browser-style tab bar. Tabs can be added and closed, and the active tab merges seamlessly into the panel below it.
Overview panel
Addable
Closable
Usage
<BrowserTabs
radius={12}
addable
closable
defaultTabs={[
{ id: "a", title: "Overview" },
{ id: "b", title: "Details" },
]}
/>How the motion works
The tab silhouette's inverted corners are drawn with radial-gradient masks on two pseudo-elements rather than an SVG mask, so the shape stays purely CSS and inherits the panel colour automatically through a token. Closing a tab moves selection to the neighbour that visually takes its place, which keeps focus where the user is looking.
usePressCSS mask
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs / defaultTabs | BrowserTab[] | — | Controlled or initial tab list. |
| activeId | string | — | Controlled active tab. |
| onTabsChange | (tabs: BrowserTab[]) => void | — | Fires on add or close. |
| createTab | (index: number) => BrowserTab | — | Builds the tab added by the + button. |
| radius | number | 12 | Corner radius of the tab silhouette, in px. |