Drawer

All four sides and sizes, drag-to-close, long scrollable content, and no-backdrop variants.

Right drawer — sizes

Bottom drawer — sizes

Left + top sides

All four sides are supported. Left/right share the width scale (sm 320px / md 480px / lg 50vw); top/bottom share the height scale (sm 40vh / md 60vh / lg 80vh). Each side animates in from its own edge with matched enter/exit curves.

Drag to close

Every side supports drag-to-close. Bottom and top drawers show a small drag-handle affordance — the recognised mobile-sheet pattern. Below the threshold (~100px or a quick flick) the panel springs back; above it, the drawer dismisses and the exit animation continues from the current drag offset.

Long content (body scrolls)

DrawerBody has its own scroll container. Header and footer stay sticky outside that region, so the title and actions remain visible no matter how long the body content gets.

No backdrop