Skip to main content

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

Notion’s app on mobile web uses these, similar to their native app

Slack, google maps, spotify have this

1 comment

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