Vue Spring Bottom Sheet Examples
Explore various usage examples of the Vue Spring Bottom Sheet component. Click any example to see it in action.
Examples
Interactive demos you can try out.
Basic Example
The simplest implementation with default settings.
Blocking Example
A sheet that blocks interactions with underlying content.
Snap Points Example
Define custom stopping positions (px or %).
With Header and Footer
Using slots for complete layout control.
List/Menu Example
Perfect for action sheets and menus.
Form Example
A sheet containing a complete form.
Image Gallery Example
Display images in a bottom sheet.
Morphing Sheet (iOS 26)
Floating card → edge-to-edge → fullscreen with spring morphing.