Overlays
Sheet
A panel docked to an edge of the viewport.
When to reach for it
Examples
sides
Notes
Radix Dialog root, trigger and close — a sheet IS a dialog, docked.
Props
Takes no props of its own.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
SheetContent
A panel docked to an edge of the viewport.
It is a modal dialog — Radix's, so the focus trap, the escape key, the scroll lock and the aria-modal wiring are the same ones Dialog gets. The only differences are where it sits and which way it arrives, which is why this shares that implementation rather than reproducing it: a second focus trap is a second focus trap to get wrong.
The title is required, visible or not. A modal with no accessible name drops a screen reader into an unnamed region with no way back out.
| Prop | Type | Default | Description |
|---|---|---|---|
| titlerequired | ReactNode | — | |
| description | ReactNode | — | |
| hideTitle | boolean | false | Hide the title visually while keeping it for assistive tech. |
| side | SheetSide | 'end' | Which edge it is docked to. `end` by default. |
Also accepts everything in Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
Re-exports
Sheet = DialogPrimitive.RootRadix Dialog root, trigger and close — a sheet IS a dialog, docked.
SheetTrigger = DialogPrimitive.TriggerSheetClose = DialogPrimitive.CloseTypes
export type SheetSide = 'start' | 'end' | 'top' | 'bottom'Keyboard
| Key | Does |
|---|---|
| Escape | Closes it, and focus returns to the trigger. |
| Tab | Cycles inside the sheet. |
Accessibility
- Shares Dialog’s focus trap, Escape handling and scroll lock rather than reproducing them — a second focus trap is a second one to get wrong.
- The title is required, visible or not.