Edge modal sheet with scrim, focus trap, and Escape to close.
Also known as: sheet, side sheet, bottom sheet
Install with the CLI, or copy the component source into your project.
Add drawer (npm)
1npx --yes -p @default-file/ui df-ui add drawer
Right edge sheet with scrim, labelled header, scrollable body, and footer actions. Open it from the trigger; the sheet covers the viewport and traps focus while open.
Canvas
Inspect document settings in the edge sheet.
Right and bottom edges. Choosing an edge opens the sheet so the scrim and body are on screen.
Choose an edge, then open the sheet.
sm, md, and lg width steps on the right edge. Choosing a size opens the sheet.
Width steps for the right edge. sm, md, and lg.
showClose false hides the header dismiss control. DrawerClose in the footer still dismisses.
Header close is off. Dismiss from the footer, Escape, or the scrim.
Parent state owns open. A page button and the trigger both open the same sheet.
Sheet is closed.
Edge modal sheet with scrim, focus trap, and Escape to close. Compose trigger, content, header, title, description, body, footer, and close.
| Prop | Type | Default | Notes |
|---|---|---|---|
| open | boolean | - | Controlled open state. |
| defaultOpen | boolean | false | Uncontrolled initial open state. |
| onOpenChange | (open: boolean) => void | - | Called when open should change. |
| side | "right" | "bottom" | "right" | Edge the sheet enters from. |
| size | "sm" | "md" | "lg" | "md" | Sheet width or height step for the chosen side. |
| children | ReactNode | - | Usually DrawerTrigger and DrawerContent with header, body, and footer parts. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| render | ReactElement | - | Optional host element. Merges open semantics onto a kit Button or other control. |
| children | ReactNode | - | Trigger content for the default button. |
| className | string | - | Additional styles on the trigger. |
Portaled dialog panel with aria-modal. Includes a scrim that closes on click.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Sheet content. |
| className | string | - | Additional styles on the panel. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| showClose | boolean | true | Show the catalogue-labeled close control in the header. |
| children | ReactNode | - | Usually DrawerTitle and DrawerDescription. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Dialog title. Required for the panel accessible name via aria-labelledby. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Supporting copy. Wired as aria-describedby when present. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Scrollable main content inside a kit ScrollArea. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Action row content. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| render | ReactElement | - | Optional host for the dismiss control. |
| children | ReactNode | - | Label or icon when not using render. |
Role (dialog): Modal dialog with focus trap. Trigger exposes aria-expanded and aria-haspopup="dialog". Include DrawerTitle so aria-labelledby resolves. Dismiss (Escape / scrim): Escape and scrim click close the sheet and return focus to the trigger.