📢 Introducing the React Aria Sheet component! ‣ Native swipe gestures powered by CSS scroll snapping ‣ Gesture-synced animations ‣ Snap points ‣ Stacking ‣ Elastic over-scroll ‣ Keyboard aware Wrote a blog post about how it works!

Also in this release: Improved overlay positioning with software keyboard, Turbopack optimize locales plugin, and plenty of bug fixes. Thanks to everyone who contributed! 😍

Looks great! Any suggestions how to create, for example, a trigger which would use Sheet on mobile devices but Dialog when using a normal size screens?

Thanks! Maybe a wrapper component with a media query? let isDesktop = useMediaQuery("(width >= 768px)") return isDesktop ? <DialogTrigger /> : <SheetTrigger />

That could be one option. I guess that in most contexts the Sheet contents would work fine in Dialog when using a larger screen. Sheet does not feel a natural component/pattern outside the mobile world.

@devongovett Side shees feels good on desktops

@devongovett Yes, that’s true. Using ”right” for the position works very well in that context.

Amazing job, the sheet feels really great! Thanks for the write-up. Very interesting to see how you used scroll-snap and timeline animations for this. Did you have to do any special magic to deal with iOS Safari's address bar?

Thanks! Yes I sure did. 😅 We make heavy use of dynamic viewport units, and also add some extra padding so you can swipe the sheet fully off the screen even behind the toolbar.

Uff, this damn address bar 😅

This is extremely impressive!

nice, finally i can throw out my custom code for this

Holy moly, that's some marvelous engineering. ngl I continue to use react only because it has react-aria

this is very nice! brb migrating from vaul

Snap points feature is beautiful

Great work! Impressive use of modern CSS

sweet

Holy grail component.

Let me see if I understand correctly: Shadcn Drawer will be based on RAC Sheet, while Shadcn Sheet is based on RAC Dialog? 😅

Great work. Feels silky. base-ui could take some inspo from here

looks perfect 😍

keyboard aware is the underrated bit. snap points don't help if the input disappears

Something like this for react native would be awesome

This is great! Just curious about your thoughts on bringing this pattern to the web. Like, the app will need to identify with JS that it’s a mobile device as we shouldn’t have this pattern in desktop (debatable). (Not blaming here, just trying to understand and learn smth)

I think side sheets are pretty nice on desktop too, and it's nice to swipe away via the trackpad.

True the side one make sense for dsk. We removed from our DS (web only) the sheet (we call it drawer) and the fullscreen dialog as those are very native specific and they need isDesktop/isMobile type of checks that we wanted to avoid. But nice work there! Pretty cool!

Safari is really annoying with this safe area 😞. It basically forces you to have a solid background. I was trying to create a Sheet with blur() yesterday, but the safe area completely breaks the continuity of the sheet.

It is possible! You can see in the sheet demo above it goes behind the address bar. The trick is that you can't use position: fixed:

Got it working! Thanks!!!

I'm noticing in the demo that there's a brief x-scroll on desktop web when closing the sheet. I wonder why?

@grok what’s the bundle size impact?

Really neat! I think you should also let developers configure scroll-snap-stop on specific snap points.

Smooth, nicely done

scroll snapping for the physics instead of a gesture lib is smart, less JS fighting the browser. does it fall back clean on older safari

scroll snap is widely supported for ~10 years. We do have a fallback for view timeline though, which is coming to Firefox 159.

good to know the fallback is already scoped, view-timeline on firefox 159 is a specific date to build against instead of guessing browser support forever

the left and right padding on the sheet should be less by default imo