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

[abhivarde]

5.4k+ weekly downloads.

built this as my first Svelte project.

every issue, feature request, and piece of feedback has helped shape it into what it is today.

thanks to everyone who’s used it and helped make it better.

Abhi Varde