Get everything for $99, lifetime

Components

Detent Drawer

Pro

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

Installation

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

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 161 Pro components · lifetime updates.

I have a licenseGet Pro
import { DetentDrawer } from "@/components/ui/DetentDrawer";

// 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.