Back to Docs
UX Pattern

Bottom Sheet Recipe

A draggable overlay panel anchored to the viewport edge — perfect for mobile-first actions, filters, and contextual menus.

Anatomy

Drag handle
Content slot

States

Collapsed

Peek handle only

Half

~50vh default

Expanded

~90vh full

Implementation

<div className="fixed inset-x-0 bottom-0
  z-50 max-h-[90vh] rounded-t-2xl
  bg-[#0A0612] border-t border-gray-800
  shadow-2xl shadow-[#8B5CF6]/10">
  <div className="mx-auto mt-3 h-1 w-10
    rounded-full bg-gray-700" />
  <div className="p-6">{children}</div>
</div>

Best Practices

  • •Lock body scroll when sheet is open via overflow-hidden on document.documentElement.
  • •Use a 200ms ease-out transition on transform for snap points.
  • •Render a scrim (bg-black/50) behind the sheet — tap to dismiss.
  • •Respect safe-area-inset-bottom for notched devices.

This pattern ships in Meridian's mobile filter panel and quick-action drawer. See the component library for the production-ready variant.