# 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.

Website: https://emilkowal.ski/ui/family-tray-system

## What it is 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](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- 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, 27 November 2023](https://x.com/emilkowalski/status/1729144214490161291): Reference implementation of iOS-style stacked bottom sheets on the web using Vaul and Framer Motion.
- [@brotzky, 27 November 2023](https://x.com/brotzky/status/1729191916678557909): Reference implementation for approximating native iOS bottom-sheet drag/tray behaviour on the web.

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/family-s-tray-system

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.