@gridui/drawer

Core family. Public API: Drawer, DrawerBody, DrawerBodyProps, DrawerClose, DrawerCloseProps, DrawerCloseButton, DrawerCloseButtonProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerPanel, DrawerPanelProps, DrawerProps, DrawerSurface, DrawerSurfaceProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps.

Import components from @gridui/drawer and load @gridui/drawer/styles.css after Theme. Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.

See component ownership and release history.

DrawerPanel portals its backdrop and surface to the document by default. Set portal={false} to keep an ordinary modal panel in its owner's DOM scope. side="start" | "end" follows writing direction; "left" | "right" fixes the physical placement and entry direction, including in RTL.

Stable inline surfaces

Use DrawerSurface inside Drawer when the same content must stay mounted while changing from inline content to a modal drawer. Closed content stays visible inline; its owner may hide its containing region when appropriate. Opening adds the panel presentation, backdrop, Radix focus trap and dismissal lifecycle to the same DOM element. Closing removes that presentation without remounting children, restarting their effects, or taking scroll snapshots. Use data-drawer-presentation="inline" | "overlay" for presentation styles.

DrawerSurface accepts DrawerPanel props except portal and forceMount. asChild preserves an owned semantic surface; native handlers, styles and refs compose through Radix Slot. Supply DrawerTitle, or an accessible name with aria-label and aria-labelledby={undefined}. Focus-restoration policy can be customized through onCloseAutoFocus, as on DrawerPanel.

<Drawer open={open} onOpenChange={setOpen}>
    <DrawerTrigger>Open navigation</DrawerTrigger>
    <DrawerSurface side="left">
        <DrawerTitle>Workspace</DrawerTitle>
        <input aria-label="Navigation draft" defaultValue="Keep this draft" />
        <DrawerClose>Close navigation</DrawerClose>
    </DrawerSurface>
</Drawer>

Radix changes its content implementation when modal presentation changes. Drawer's private binding attaches the temporary modal lifecycle to the retained surface; Sidebar does not implement that mechanism. The owner must keep this inline surface outside transformed or clipping ancestors and provide an adequate stacking context. Use a normal portalled DrawerPanel for independent overlays.

Surface motion uses @gridui/overlay; load @gridui/overlay/styles.css after Theme and before this family.

Component reference contains focused API pages for each public component.

Footer actions

DrawerFooter owns the body separator, scrolling limit, and bottom safe-area inset. It has no general content padding. Use ButtonGroup from @gridui/button with layout="cells" for edge-aligned footer actions; ordinary footer content supplies its own padding. Load Button styles before Drawer styles.

<DrawerFooter>
    <ButtonGroup layout="cells">
        <DrawerClose asChild><Button variant="secondary">Done</Button></DrawerClose>
    </ButtonGroup>
</DrawerFooter>