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)

• https://github.com/Temzasse/react-modal-sheet

• 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