Skip to content

Blanket ​

A full-screen overlay backdrop. Use behind modals, drawers, and other floating elements to block interaction with the page beneath.

Basic ​

Content behind blanket
Tailwind v4
vue
<Blanket :open="isOpen" @click="isOpen = false" />

Untinted (transparent) ​

Content still visible
Tailwind v4
vue
<Blanket :open="isOpen" :tinted="false" @click="isOpen = false" />

Props ​

PropTypeDefaultDescription
openbooleanfalseControls visibility
tintedbooleantrueDark semi-transparent overlay vs transparent
canClickThroughbooleanfalseWhen true, mouse events pass through

Events ​

EventDescription
clickEmitted when the blanket is clicked (and canClickThrough is false)

Private — Jetpack Labs internal use only