Dialog · Sheet · Drawer

Three overlay primitives. All share the same Scrim (32% black + 2px blur) and use deeper glass (blur + 8px) on the panel.

Preview

import { Dialog, Sheet, Drawer, Button } from "@/components/br/primitives";

const [open, setOpen] = React.useState(false);

<Button onClick={() => setOpen(true)}>Open dialog</Button>

<Dialog
  open={open}
  onClose={() => setOpen(false)}
  title="Archive this project?"
  description="Archiving moves it to read-only…"
  footer={<>
    <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
    <Button variant="primary" onClick={confirm}>Archive</Button>
  </>}
>
  {/* body */}
</Dialog>

<Sheet open={...} onClose={...} title="Edit profile" footer={...}>
  {/* right-aligned sheet body */}
</Sheet>

<Drawer open={...} onClose={...}>
  {/* bottom-aligned drawer body */}
</Drawer>

Props

Notes

Esc closes all three. Scrim is heavier in variant B (56% opacity) for theatrical contrast.