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 github:itsvigneshv/default-file-ui#main df-ui add drawer
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.