Bottom Sheets | swipe-bar

Basic Bottom Sheet

A bottom sheet is a SwipeBarBottom that slides up from the bottom edge. Unlike left/right sidebars, bottom sheets use sidebarHeightPx instead of width, and almost always use isAbsolute to overlay on top of content:

BasicSheet.tsx

<SwipeBarBottom
  sidebarHeightPx={400}
  isAbsolute
  className="bg-gray-900 text-white"
>
  <div>
    <h2>Quick Actions</h2>
    <p>Sheet content here</p>
  </div>
</SwipeBarBottom>

Mid-Anchor Point

Enable midAnchorPoint and the sheet stops halfway on the first swipe. Swipe again to fully open. Like the Maps app on iOS. The mid-anchor height defaults to half of sidebarHeightPx, or set it explicitly with midAnchorPointPx.

MidAnchor.tsx

<SwipeBarBottom
  sidebarHeightPx={600}
  midAnchorPoint
  isAbsolute
  className="bg-gray-900 text-white"
>
  <div>Swipe up to mid-point, again for full</div>
</SwipeBarBottom>

// Programmatic control:
const { openSidebarToMidAnchor, openSidebarFully } = useSwipeBarContext();

// Open to mid-anchor
openSidebarToMidAnchor("bottom");

// Skip mid-anchor, go straight to full
openSidebarFully("bottom");

The bottomAnchorState from context tells you exactly where the sheet is: "closed", "midAnchor", or "open".

Multiple Instances

Need more than one bottom sheet? Give each an id. Every instance has independent state. The default ID is "primary". This same pattern applies to SwipeBarLeft and SwipeBarRight as well. See the multi-instance example for a live demo.

MultiInstance.tsx

// Primary bottom sheet (default id)
<SwipeBarBottom sidebarHeightPx={500} isAbsolute>
  <div>Primary panel</div>
</SwipeBarBottom>

// Secondary bottom sheet — programmatic only
<SwipeBarBottom
  id="secondary"
  sidebarHeightPx={350}
  isAbsolute
  swipeToOpen={false}
  showToggle={false}
  swipeBarZIndex={35}
  overlayZIndex={25}
>
  <div>Secondary panel (stacks on top)</div>
</SwipeBarBottom>

multi-instance-control.ts

const { openSidebar, closeSidebar, bottomSidebars } = useSwipeBarContext();

// Open specific instance
openSidebar("bottom", { id: "secondary" });

// Read state per instance
const isPrimaryOpen = bottomSidebars.primary?.isOpen ?? false;
const isSecondaryOpen = bottomSidebars.secondary?.isOpen ?? false;

Programmatic-Only Sheets

Set swipeToOpen= and showToggle= to create a sheet that opens only via openSidebar. Once open, the user can still swipe down to close it. Set swipeToClose= to allow swiping but snap back to open on release. Use disableSwipe to kill all gesture interaction entirely.