Svelte Drawer // Gesture-driven drawer component for Svelte 5

[abhivarde]

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

[pawlean (Pauline P. Narvas)]

Nice one! Thanks for sharing

Very timely given our recent live session!

Community Session: Svelte on Vercel

[abhivarde]

@pawlean

Nice one! Thanks for sharing

Very timely given our recent live session!

thanks! the live session motivated me to share this here

[abhivarde]

github and npm link here if anyone wants to try it

→ GitHub - AbhiVarde/svelte-drawer: A drawer component for Svelte 5, inspired by Vaul. · GitHub
→ https://www.npmjs.com/package/@abhivarde/svelte-drawer

[abhivarde]

shipped a small but useful update to svelte-drawer!

v1.0.5 adds an autoHeight prop: drawer resizes to fit its content without any fixed heights. handy if you’re putting AI responses or multi-step forms inside a drawer.

demo: drawer.abhivarde.in
npm: @abhivarde/svelte-drawer

[abhivarde]

svelte-drawer now works natively with AI coding tools

You can now install svelte-drawer as an agent skill. Claude Code, Cursor, Copilot, Windsurf, and 10+ other tools will know every drawer component, direction, snap point, and animation pattern without pasting docs into chat.

npx skills add AbhiVarde/svelte-drawer

The skill covers bottom, top, left, right drawers, snap points (0–1 fractions), portal rendering, nested drawers, persistent state with localStorage, auto-height mode, and Svelte 5 runes pattern.

If you already use svelte-drawer, this update makes it work much better with how most developers build today.

Skills: https://skills.sh/abhivarde/svelte-drawer/svelte-drawer
GitHub: GitHub - AbhiVarde/svelte-drawer: Accessible drawer component for Svelte 5, inspired by Vaul. · GitHub (35+ stars)
Live demos: https://drawer.abhivarde.in

[abhivarde]

hey devs

recently, a few community members raised issues and feature suggestions for svelte-drawer.

happy to share that everything is now fixed in v1.0.7

new: closeThreshold prop for controlling drag to close

<Drawer bind:open closeThreshold={0.15} />

lower value = easier drag to close
higher value = longer drag required

also improved compatibility with the latest Svelte version and fixed reported issues.

update:

npm install @abhivarde/svelte-drawer@latest

if you have any feature ideas or feedback, let me know

[bestcodes]

This is really great, I love this @abhivarde! I need to try Svelte more, I haven’t used it much.
Is the animation customizable? I wish it felt a bit smoother, like Vaul:

Vaul

[abhivarde]

yes, just shipped v2.0.0
with animationDuration and animationEasing props on Drawer

<Drawer animationDuration={400} animationEasing={cubicOut}>

any easing from svelte/easing works, or pass your own function.
controls open, close, and snap transitions. default is unchanged so nothing breaks!

Abhi Varde

[abhivarde]

shipped a small milestone → svelte-drawer just crossed 2,220 weekly downloads

https://x.com/varde_abhi/status/2076900658985488469