Sheet

Sheet is a responsive dialog: it slides up from the bottom edge on mobile and renders as a centered modal on wider screens. Reach for it for short forms and confirmations that want more breathing room than ConfirmDialog. It is portaled, traps focus, and dismisses on Escape or backdrop click. Controlled via open/onClose, with a required title.

Example

import { Sheet } from '@officina/ui';
import { useState } from 'react';

function ShareSheet() {
  const [open, setOpen] = useState(false);
  return (
    <Sheet open={open} onClose={() => setOpen(false)} title="Share link">
      {/* sheet body */}
    </Sheet>
  );
}

API