Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA focus boundary for custom panels: moves focus in on mount, optionally traps Tab, and restores focus to where it came from on unmount.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for panels you build yourself: an inline editor that replaces a row, a non-modal side panel, a custom popup. It supplies the focus behaviour that Radix, Base UI and React Aria overlays already have.
Do not wrap a Radix or Base UI dialog in it: they trap focus already, and two traps fight. A real modal also needs inert or aria-modal on the page behind it, which this does not add.
| Prop | Type | Default | Description |
|---|---|---|---|
trapped | boolean | false | Keep Tab and focus inside. |
autoFocus | boolean | true | Move focus in on mount. |
restoreFocus | boolean | true | Return focus on unmount. |
[data-autofocus], else the first tabbable element, else the scope itself (tabindex="-1").trapped, Tab and Shift+Tab wrap and stray focus is pulled back inside.| Key | Action |
|---|---|
| Tab and Shift+Tab | wrap at the ends while trapped |
The component ships a Testing Library test (focus-scope.test.tsx) that covers focus in and restore, data-autofocus, Tab wrapping both ways, pulling focus back and the untrapped case.