#Dynamic content

A drawer without snap points sizes itself to its content. As the content changes (a wizard advancing, an async list loading, an accordion expanding) the drawer's intrinsic height follows. This is the "family-style" pattern popularized by the Family iOS app.

const steps = [
  { title: 'Step 1', body: <Step1Body /> },
  { title: 'Step 2', body: <Step2Body /> },
  { title: 'Step 3', body: <Step3Body /> },
];

function Wizard() {
  const [step, setStep] = useState(0);
  return (
    <Drawer.Root onOpenChange={open => { if (!open) setStep(0); }}>
      <Drawer.Trigger>Start</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay />
        <Drawer.Content>
          <Drawer.Title>{steps[step].title}</Drawer.Title>
          {steps[step].body}
          <button onClick={() => setStep(s => s + 1)}>Next</button>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

The drawer has no snapPoints, so vaul does not impose any height. The browser resizes the drawer instantly each time the content changes. If you want the resize to animate, add a CSS transition for height to your content - vaul will not transition height on your behalf.

#Dynamic content with snap points

Snap point offsets are calculated from window.innerHeight, not from the drawer's measured height (see Snap points). That means changing the content inside a snap-pointed drawer does not change the snap positions. If you want the drawer to settle differently after content changes, call setActiveSnapPoint yourself.

const [snap, setSnap] = useState<number | string | null>('200px');

function expandAndResnap() {
  setExpanded(true);
  setSnap('440px');
}