Drawer sheet
I created Drawer component but i felt this probably can be independent
On mobile, sheets are heavily used to keep users in context when viewing or making changes on an entity.
Having this in herov3 web and native would make for a killer user experience. Often one of the hardest things to get right is similar feature parity between platforms (web vs native).
These are pretty hard to implement and the only web library I’ve seen get this right is silkhq which is an expensive paid library that only focuses on this.
Side note: for one of my web apps, I started using shadcn’s drawer with bottom, but once i started using with inputs fields inside, it would break (lots of cross browser issues).
References
Previous art
https://silkhq.com/ (the best implementation that exists on web)
react-aria:
https://react-spectrum.adobe.com/react-aria/examples/framer-modal-sheet.html
Notion’s app on mobile web uses these, similar to their native app
Slack, google maps, spotify have this
Log in to comment and vote
Comments1
Clifford Fajardo
Sep 19, 2025
Forgot to add this in original post, but this part on mobile web is one the things that breaks the experience (shadcn, react-modal-sheet)
https://github.com/Temzasse/react-modal-sheet/issues/213
I think react-aria may have this challenge of using a modal/drawer with input fields and handling focus/autoscrolling to input and adjusting the drawer/modal on mobile web (ios) when the URL bar appears and hides
https://x.com/devongovett/status/1968746973084729480
I ended up paying $299 ueros for SilkHQ to make progress on a personal project/experiement. Its the only modal sheet on web that seems to work reliably, looks and feels nice