Collection Sheet Overlay

A draggable bottom sheet dialog that opens from a trigger button and lets a user pick one option from a radio list, with swipe/drag-to-dismiss and a native dialog backdrop. Ported to React from the SLtowl UI library's vanilla HTML/JS "sheet-overlay" package, credited to original author SLtowl.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Collection Sheet Overlay to your project and fits it to your theme.

import SheetOverlay from "@/components/ui/matte-sheet-overlay";

export default function SheetOverlayDemo() {
  return (
    <div className="w-full h-screen">
      <SheetOverlay />
    </div>
  );
}