Skip to main content

​
Package Manager

Install Svelte Drawer using your preferred package manager: 
npm install @abhivarde/svelte-drawer

​
Requirements

Svelte Drawer requires Svelte 5 as a peer dependency.
Svelte Version: This library requires Svelte ^5.0.0 or higher. Make sure your project is using Svelte 5 before installing.

​
Check Your Svelte Version

Verify your Svelte version in package.json:
package.json
{
  "dependencies": {
    "svelte": "^5.0.0"
  }
}
If you’re on Svelte 4 or earlier, you’ll need to upgrade to Svelte 5 first. See the Svelte 5 migration guide for details.

​
Styling Setup

Svelte Drawer works seamlessly with Tailwind CSS for styling. While not strictly required, the examples and prebuilt variants use Tailwind utility classes.
If you’re using Tailwind CSS, no additional setup is needed. The drawer components accept class props for custom styling.
For custom styling without Tailwind, you can use regular CSS classes or inline styles on any component.

​
Verify Installation

After installation, verify that the package is correctly installed: 
npm list @abhivarde/svelte-drawer
You should see the package version displayed in your terminal.

​
TypeScript Support

Svelte Drawer includes full TypeScript definitions out of the box. No additional @types packages are needed. 
// Type definitions are automatically available
import { Drawer, DrawerOverlay, DrawerContent } from '@abhivarde/svelte-drawer';

​
Next Steps

Quickstart Guide

Build your first drawer in under 5 minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us