Svelte Drawer is a flexible, accessible drawer component for Svelte 5, inspired by Vaul.
Built for developers who want smooth, gesture-driven drawers without the boilerplate.
What Svelte Drawer does:
- Smooth animations with gesture-driven dragging (mouse & touch)
- Multiple directions: bottom, top, left, right
- Snap points for iOS-like multi-height drawers (0.25, 0.5, 0.9)
- Prebuilt variants: default, sheet, dialog, minimal, sidebar
- Portal rendering to escape z-index conflicts
- Optional header & footer components for quick setup
- Backdrop blur with configurable intensity
- Persistent state across page reloads
- Nested drawer support
- Full keyboard navigation + focus trap
Who it’s for:
- Svelte 5 developers building mobile-friendly UIs
- Apps needing iOS-style bottom sheets or side drawers
- Projects where accessibility and keyboard nav matter
- Anyone tired of writing drawer logic from scratch
Technical details:
- Framework: Svelte 5 (uses $state runes)
- Styling: Tailwind CSS compatible
- TypeScript: Full support
- Install: npm install @abhivarde/svelte-drawer
3,000+ npm downloads · 30+ GitHub stars · Open source (MIT)
Live demo: drawer.abhivarde.in
