Bottom Sheet Present
A sheet rises from the bottom edge over a dimming backdrop and settles once.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Bottom Sheet Present
*
* A sheet that rises from the bottom edge over a dimming backdrop and
* settles once. Tap the backdrop or press Escape to send it back.About this pattern
Secondary choices that shouldn't cost a screen change: pick a payment method, share a link, filter a list. The backdrop dims as the sheet travels up from the edge it came from, which is what tells the user the page underneath is still there and still theirs to return to. Everything rides on the landing — this is the largest surface in the library, and a large surface that bounces reads as a mistake rather than a flourish, so the spring settles once and the page behind it never scales. Dismissal is deliberately quicker than the entrance, and Escape and the backdrop both work.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Modal sheet
System sheets rise over a dimmed screen and land without a rebound.
Related patterns
- Drawer Slide InA side drawer travels in over the page, and the page eases back a little to hand it the foreground.
- Modal Scale InA dialog grows the last few percent into place behind a darkening scrim, and leaves the same way.
- Mobile Menu FullscreenA hamburger becomes a close glyph as a full-screen menu wipes in with staggered links.