Planes

Components

Controls

Detent Drawer

ProUnlock all 54 Pro — $99 once

An iOS-style bottom sheet with detents. Drag between resting heights, rubber-band past the top, flick down to dismiss — all velocity-aware.

All components

Opens over the page. Drag between detents, flick down to dismiss.

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/detent-drawer

Unlock with Planes Pro

$99 once · 54 Pro components · lifetime updates.

I have a licenseGet Pro
// Mark the page root once, e.g. in your layout:
// <div data-drawer-wrapper className="min-h-dvh bg-white dark:bg-zinc-950">…</div>

<DetentDrawer
  fixed
  scaleBackground
  open={open}
  onClose={() => setOpen(false)}
  detents={[0.45, 0.9]}
>
  <SheetContent />
</DetentDrawer>

Use cases

  • Mobile action sheets

    Share sheets, queues, and pickers that feel native instead of modal.

  • Half-then-full detail views

    Open at 45% for a summary; drag to 90% for the full content.

  • Map and player overlays

    Persistent bottom UI the user resizes by feel, like Apple Maps.

  • Mobile filters

    A filter panel that dismisses with a flick instead of a close button.