Diadem-Vaul-Svelte is an unstyled drawer component for Svelte that can be used as a Dialog replacement on tablet and mobile devices. It uses Bits' Dialog primitive under the hood and is inspired by this tweet.

This is a fork of vaul-svelte by @huntabyte. The original library is a port of Vaul for React, created by Emil Kowalski.

This fork tracks upstream while carrying changes needed for Diadem. If you want a general-purpose drawer, use the upstream vaul-svelte package.

Usage

To start using the library, install it in your project:

npm install diadem-vaul-svelte

Use the drawer in your app.

<script>
	import { Drawer } from "diadem-vaul-svelte";
</script>

<Drawer.Root>
	<Drawer.Trigger>Open</Drawer.Trigger>
	<Drawer.Portal>
		<Drawer.Content>
			<p>Content</p>
		</Drawer.Content>
		<Drawer.Overlay />
	</Drawer.Portal>
</Drawer.Root>

Differences from upstream

• Uses Bits UI v2 and Svelte 5.
• asChild/builder slot patterns from the upstream demo are not supported here.
• This fork targets Diadem’s usage, so the demo site and extended docs are removed.

License

Published under the MIT license. Made by @huntabyte and community 💛