Bottom Sheet

Accessibility

• A native modal dialog with the title as its label.
• Focus moves in and returns to the trigger.
• The grabber is decorative: always offer a visible close or Cancel.

Motion

• Rises on a 0.15 spring over 400 ms. Web scales from 0.96 and fades.
• Follows the finger, and dismisses past 30% or at 600 px/s.
• The grabber widens to 48 and darkens while pressed.
• With reduced motion, it fades in. Drag still follows.

Responsive behavior

• Full width with a grabber on Mobile. Rows are 52 high and buttons stack.
• 480 floating, 24 from the bottom on Web. Rows are 44 high.

Performance

• Shares Modal with Dialog: a native dialog that mounts only while open.
• While loading, the content keeps its space under the skeleton, so the sheet holds its height.

• Import BottomSheet and BottomSheetAction from @/components/fetaui/bottom-sheet after installing it.
• Mobile docks with a grabber and drops the close button when footer is set, so put Cancel there. Without a footer it keeps the close button. Web floats at 480 with a close button.
• locked stops every way out while something sends. loading shows the skeleton.
• The send in the demo is a timer, and the action rows only close the sheet. Composes Modal, IconButton and Skeleton.