xiry.

Development · GitHub repo

magic-spells/bottom-sheet

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

From the Xiry library · Updated 11 October 2026

Visit github.com ↗

Also at magic-spells.github.io

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.

What it's 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
Topic
UI Components
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: A reusable UI primitive (drag-up sheet with smooth motion) worth checking for product work involving mobile-style overlays.
  • @cory_schulz_, 10 August 2026: Source to install/reuse the smooth bottom sheet.

Related

  • shadcn/ui

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated