Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProTabs the person can add and close, like editor or browser tabs, with Delete to close, neighbour focus and selection, and pinned tabs that cannot be closed.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for open documents, queries, files or conversations that people open and close themselves.
Do not use it for a fixed set of sections (use tabs) or for more tabs than fit: pair it with overflow-tabs logic or a list instead.
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | { value, label, content, pinned? }[] | - | The open tabs. Pinned tabs cannot be closed. |
value | string | - | Selected tab. |
onValueChange | (value: string) => void | - | Called when the selection changes. |
onClose | (value: string) => void | - | Remove the tab from tabs. |
onAdd | () => void | - | Add a tab and select it. |
addLabel | string | New tab | Accessible name of the + button. |
aria-keyshortcuts="Delete"; pinned tabs omit it. The x icon is a pointer shortcut and not a tab stop, so the tablist contains only tabs.| Key | Action |
|---|---|
| ArrowRight / ArrowLeft | move between tabs (mirrored in RTL), activating |
| Home / End | first / last tab |
| Delete or Backspace | close the focused tab |
| Middle click | close a tab |
The component ships a Testing Library test (editable-tabs.test.tsx) that covers adding, closing with Delete and focus handoff, pinned tabs, closing the last tab and arrow navigation.