# magic-spells/bottom-sheet

> Lightweight, accessible Web Component for building gesture-driven bottom sheets on the web.

magic-spells/bottom-sheet is an accessible custom element for mobile-style bottom sheets, built on top of the native dialog element. It features velocity-aware dismissal, physics-based spring settling, and intelligent gesture delegation between sheet dragging and internal content scrolling. Because it is a standard Web Component, it works across frameworks with minimal overhead.

Website: https://github.com/magic-spells/bottom-sheet

Also at: https://magic-spells.github.io/bottom-sheet/demo

## What it is for

- Build mobile-first navigation menus and contextual action sheets
- Display multi-step checkout or detail panels with variable snap points
- Replace heavy modal dialogs with native-feeling sliding panels on mobile browsers

## Features

- Built directly on the native HTML dialog element for built-in focus trapping, Escape key closing, and accessibility
- Pointer Events support covering mouse, touch, and stylus interactions
- Configurable snap points driven by percentage of dynamic viewport height (dvh)
- Velocity-aware damped spring physics when settling onto snap points
- Smart gesture detection that smoothly transitions between content scrolling and panel dragging
- Rubber-band resistance effect on upward over-dragging
- Optional inset mode for detached, rounded bottom sheet styling

## Pricing

Open source

## Details

- Type: GitHub repo
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Code library
- For: Front-end developers and UI engineers building mobile web experiences
- Alternative to: Vaul
- Tags: web components, bottom sheet, modal, gestures, ui library, frontend

## Why it was saved

- [@cory_schulz_, 10 August 2026](https://x.com/cory_schulz_/status/2086641736999116833): A reusable UI primitive (drag-up sheet with smooth motion) worth checking for product work involving mobile-style overlays.
- [@cory_schulz_, 10 August 2026](https://x.com/cory_schulz_/status/2086641736999116833): Source to install/reuse the smooth bottom sheet.

## 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 11 October 2026. Page: https://xiry.app/resources/magic-spells-bottom-sheet-2461

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.