Bottom Sheet

A draggable sheet with snap points floating over a map — non-modal, so the map behind stays interactive.

snapPoints={[0.4, 0.85]} modal={false}bottom-sheetdragsnap-pointsmap

Open fullscreen

9:41

In this demo

Wander — city guide

What to try

Drag the handle up — the sheet snaps taller
Drag well down — it dismisses; reopen from the button
The map stays interactive behind it

Code

app.tsx

import { AppShell, BottomSheet, SafeArea } from "appshell-react";
import { useState } from "react";

export default function App() {
  const [open, setOpen] = useState(true);

  return (
    <AppShell safeArea>
      <MapCanvas />  {/* full-bleed map behind everything */}

      {/* Floating search, padded past the notch */}
      <SafeArea edges={["top"]} className="pointer-events-none fixed inset-x-0 top-0 z-10 flex-none">
        <FloatingSearch />
      </SafeArea>

      <BottomSheet
        open={open}
        onClose={() => setOpen(false)}
        modal={false}                 // the map behind stays interactive
        snapPoints={[0.4, 0.85]}      // rest at 40%, drag up to 85%
        aria-label="Nearby places"
      >
        {/* scrolls internally; drag the grabber between snaps,
            drag well down to dismiss */}
        <PlacesList />
      </BottomSheet>
    </AppShell>
  );
}

Docked Sidebar Search, Notifications & User Menu