Pure Web Bottom Sheet Demo

Download Back To CSSScript.Com

Build smooth bottom sheet UIs with CSS scroll snap mechanics. Pure Web Bottom Sheet works across React, Vue, and vanilla HTML with native mobile feel.

Open bottom sheet

More Official Demos

• Non-dismissible bottom sheet (with multiple snap points)
• Modal bottom sheet (using dialog)
• Modal bottom sheet (maximum height half of viewport)
• Nested dialogs (no extra styling)
• Nested dialogs with a stacking effect and a scaled background effect (extra styling)
• Non-modal bottom sheet with Popover API ("pure CSS")
• Chat (on-screen keyboard avoidance)
• Non-dismissible bottom sheet with dynamic content (to demonstrate dynamic content causes no abrupt re-snapping)