Development · Web app
Family's tray system
Web recreation of Family's native iOS bottom-sheet tray system
An interactive web demo by Emil Kowalski recreating Family's native iOS stacked bottom sheets using Vaul and Framer Motion. It showcases how to replicate complex native drag-to-dismiss trays and stacked modal transitions in a browser environment. It serves as a visual and functional reference implementation for front-end engineers building mobile-friendly web interfaces.
What it's for
- Reference nested and stacked bottom-sheet animations for web apps
- Study gesture-driven drawer interactions built with Vaul and Framer Motion
- Inspect UI transitions for confirmation and warning flows in mobile web views
Features
- Stacked bottom-sheet navigation mirroring native iOS flows
- Scale-and-fade background transitions when pushing new sheets
- Smooth drag-to-dismiss gesture handling powered by Vaul
- Animated transitions powered by Framer Motion
- Mobile-first interactive wallet dialog demo
Pricing
Free interactive demo
Details
- Type
- Web app
- Category
- Development
- Topic
- UI Components
- Platforms
- Web
- For
- Front-end developers and UI/UX design engineers
- Tags
- drawer, bottom sheet, vaul, framer motion, react, mobile web, ui design
Why it was saved
- @emilkowalski: Reference implementation of iOS-style stacked bottom sheets on the web using Vaul and Framer Motion.
- @brotzky: Reference implementation for approximating native iOS bottom-sheet drag/tray behaviour on the web.
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Updated