Overlay

import { useState } from 'react'
import { Drawer, type Snap } from '@vladyoslav/drawer'
// or import { DrawerOverlay } from '@vladyoslav/drawer'
 
export const MyComponent = () => {
  const snapPoints = ['100px', '50%', '100%']
  const [snap, setSnap] = useState<Snap>(snapPoints[0])
 
  return (
    <Drawer.Root
      snap={snap}
      setSnap={setSnap}
    >
      <Drawer.Trigger />
      <Drawer.Portal>
        <Drawer.Overlay
          className="..."
          radixPrimitive={false} // use custom primitive
          fadeFrom={'100px'} // same as fadeFrom={100}
          blockInteraction={snap === '100%'} // block page scrolling on the last snap point
        />
          ...
      </Drawer.Portal>
    </Drawer.Root>
  )
}