Sheet

Accessibility

• A native modal dialog labelled by the title.
• Focus moves to the title and returns to the trigger on close.
• The scrolling body is keyboard reachable.
• Return false from onBeforeClose to ask about unsaved changes first.

Motion

• Slides from its edge on a 0.3 spring over 320 ms, with the scrim fading to 28%.
• The body follows 60 ms later, rising 8 px.
• Closing takes 220 ms.
• A bottom sheet follows the finger and closes past 40% or on a flick.
• With reduced motion, it fades in.

Responsive behavior

• 400 wide for Left and Right, or the width you pass. Top and Bottom lay the body out in a row on Web.
• Width minus 16 on Mobile, with a grabber on Bottom and Medium buttons in the footer.

Performance

• Shares Modal with Dialog: a native dialog that mounts only while open.
• The body fades in 60 ms after the panel starts, using opacity and transform only.

• Import Sheet from @/components/fetaui/sheet after installing it.
• title and children are required. side defaults to right, and width gives a centred top or bottom sheet.
• onBeforeClose receives the reason and returns false to stop a dismiss. locked stops every way out while something saves.
• The discard prompt in the demo is your own AlertDialog opened from onBeforeClose, and the save is a timer. Composes Modal and IconButton.