Components

Drawer

A swipe-dismissable edge panel for narrow navigation and temporary detail.

Side drawer

tsx

<Drawer.Root side="right">
  <Drawer.Trigger render={<Button>Open details</Button>} />
  <Drawer.Portal>
    <Drawer.Backdrop />
    <Drawer.Viewport>
      <Drawer.Popup>…</Drawer.Popup>
    </Drawer.Viewport>
  </Drawer.Portal>
</Drawer.Root>

Sides and gestures

Top, right, bottom, and left placement each map to the matching swipe-dismiss gesture. Use Dialog when gesture dismissal and edge attachment are unnecessary.