Bottom Drawer

slide-up x sheet

Bottom sheet drawer with drag handle. From Cult UI.

drawersheetbottomcultui

Code

dialog-drawer.tsx

"use client";
import { useEffect } from "react";

export function BottomDrawer({ open, onClose, children }: { open: boolean; onClose: () => void; children: React.ReactNode }) {
  useEffect(() => { if (open) document.body.style.overflow = "hidden"; else document.body.style.overflow = ""; return () => { document.body.style.overflow = ""; }; }, [open]);
  if (!open) return null;
  return (
    <>
      <div className="fixed inset-0 z-30 bg-black/50" onClick={onClose} />
      <div className="fixed bottom-0 left-0 right-0 z-40 animate-[slideUp_0.3s_ease-out] rounded-t-2xl border-t border-border bg-card p-6 shadow-xl">
        <div className="mx-auto mb-4 h-1 w-12 rounded-full bg-muted" />
        {children}
      </div>
    </>
  );
}
/* CSS: @keyframes slideUp { from { transform: translateY(100%) } to { transform: translateY(0) } } */

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Bottom Drawer component and wire it to my accent.”