Bottom Sheet Preview
Explore interactive bottom sheets with smooth transitions, snap points, and event tracking. Built for SvelteKit.
Basic Bottom Sheet
The Basic Bottom Sheet provides a clean and simple interaction. It slides up smoothly from the bottom of the screen, allowing users to quickly access additional content or actions.
- Smooth animations with customizable easing
- Backdrop overlay with click-to-dismiss
- Drag handle for intuitive interaction
Snap Points
This version of the Bottom Sheet allows users to drag it to predefined snap points. It's great for when you want the sheet to stop at specific heights, making the interaction more predictable and controlled.
- Define multiple snap points (25%, 50%, 75%)
- Set a default starting position
- Sheet automatically snaps to the closest point
Scrollable Content
When your content exceeds the height of the sheet, it automatically becomes scrollable. This is perfect for displaying lists, search results, or any content that might be lengthy.
- Smooth scrolling within the sheet
- Sheet height remains fixed while content scrolls
- Works with dynamic content loading
Event Tracking
Track every interaction with the Bottom Sheet. From opening and closing to dragging, you can listen to all events and keep an accurate log of user interactions.
- Event callbacks for open, close, drag start/end
- Snap point change notifications
Flexible Positioning
Position your sheet not just at the bottom, but also at the top, left, or right of the screen. This flexibility allows for more creative UI patterns and interactions.
- Four positioning options (top, right, bottom, left)
- Consistent interaction patterns regardless of position
- Responsive behavior on all screen sizes