Skip to main content
Svelte Drawer is a powerful, accessible drawer component for Svelte 5, inspired by Vaul. It provides a smooth, gesture-driven interface with comprehensive support for mobile touch interactions and keyboard navigation.

Gesture-Driven

Smooth animations with intuitive drag handling for both mouse and touch interactions

Mobile Optimized

Advanced scroll prevention and touch handling optimized for mobile devices

Fully Accessible

Complete keyboard navigation, focus management, and ARIA attributes

TypeScript Ready

Full TypeScript support with comprehensive type definitions

​
Key Features

  • Smooth animations with gesture-driven dragging (mouse & touch)
  • Mobile-optimized drag handling with scroll prevention
  • Snap points for iOS-like multi-height drawers
  • Scrollable content areas with proper touch handling
  • Support for multiple directions: bottom, top, left, right
  • Prebuilt variants: default, sheet, dialog, minimal, sidebar
  • Drag handle component with auto-adaptive orientation
  • Portal rendering to escape z-index conflicts
  • Optional header & footer components for quick setup
  • Nested drawer support
  • Full TypeScript support
  • Customizable styling with Tailwind CSS
  • Persistent state across page reloads
  • Keyboard shortcuts (Escape to close, Tab navigation)
  • Focus management (auto-focus, focus trap, focus restoration)
  • Fully accessible with proper ARIA attributes
  • Screen reader friendly

​
What Makes It Special?

Gesture-Driven Design: Unlike traditional modal dialogs, Svelte Drawer responds naturally to user gestures. Drag down to dismiss, drag to snap points, or use keyboard shortcuts - it works the way users expect. Mobile First: Built with mobile in mind from the ground up. Touch interactions are smooth, scroll prevention works reliably, and the component feels native on mobile devices. Flexible & Composable: Use the low-level Drawer, DrawerOverlay, and DrawerContent components for full control, or leverage prebuilt variants and optional header/footer components for rapid development.

​
Live Demo

Experience Svelte Drawer in action at drawer.abhivarde.in

​
Next Steps

Installation

Install Svelte Drawer and set up your project

Quickstart

Build your first drawer in under 5 minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us