Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA side sheet with a draggable, keyboard-operable edge: a separator with value, min and max, logical start or end side, built on the Radix dialog.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for detail panels where the right width depends on the content or the person: an order, a log line, a record with a wide table.
Do not use it for short confirmations (use a dialog) or for permanent side navigation (use a sidebar). On narrow screens it is capped at the viewport.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "start" | "end" | end | Which edge the sheet attaches to. |
defaultWidth | number | 420 | Width in px when it opens. |
minWidth / maxWidth | number | 320 / 720 | Limits in px. |
onWidthChange | (width: number) => void | - | Called when the width changes. |
open / onOpenChange | boolean / fn | - | Dialog state. |
role="separator" with aria-valuenow, aria-valuemin and aria-valuemax, focusable and operable by keyboard and pointer.side is logical, and the arrow keys flip in right-to-left layouts.| Key | Action |
|---|---|
| Arrow keys on the edge | change the width by 16px (Shift: 64px) |
| Home / End | minimum / maximum width |
| Escape | closes the sheet |
| Tab | stays inside the sheet |
The component ships a Testing Library test (resizable-sheet.test.tsx) that covers the dialog and separator semantics, keyboard resizing, dragging with clamping and closing.