Drawer

A drawer component for Svelte.

Docs

Epicenter

Local-first, open source apps

Special Sponsor

<script lang="ts">
	import { toast } from "svelte-sonner";
	import * as Drawer from "$lib/components/ui/drawer/index.js";
	import * as Field from "$lib/components/ui/field/index.js";
	import * as RadioGroup from "$lib/components/ui/radio-group/index.js";
	import { IsMobile } from "$lib/components/hooks/is-mobile.svelte.js";
	import { Badge } from "$lib/components/ui/badge/index.js";
	import { Button, buttonVariants } from "$lib/components/ui/button/index.js";
 
	const deliveryTimes = [
		{
			value: "asap",
			id: "delivery-asap",
			label: "Standard delivery",
			description: "25–35 min · Driver assigned now",
			badge: "Fastest",
		},
		{
			value: "5-00",
			id: "delivery-5-00",
			label: "5:00 PM – 5:15 PM",
			description: "Prep starts at 4:45 PM",
		},
		{
			value: "5-30",
			id: "delivery-5-30",
			label: "5:30 PM – 5:45 PM",
			description: "Good if you're heading home",
		},
		{
			value: "6-00",
			id: "delivery-6-00",
			label: "6:00 PM – 6:15 PM",
			description: "Most popular · High demand",
		},
		{
			value: "6-30",
			id: "delivery-6-30",
			label: "6:30 PM – 6:45 PM",
			description: "Last slot before kitchen closes",
		},
	];
 
	let open = $state(false);
	let deliveryTime = $state("asap");
	const isMobile = new IsMobile();
 
	function handleConfirm() {
		const selected = deliveryTimes.find((time) => time.value === deliveryTime);
 
		if (!selected) {
			return;
		}
 
		open = false;
		toast("Delivery time confirmed", {
			description: selected.label,
		});
	}
</script>
 
<Drawer.Root bind:open direction={isMobile.current ? "bottom" : "right"}>
	<Drawer.Trigger class={buttonVariants({ variant: "secondary" })}>Open Drawer</Drawer.Trigger>
	<Drawer.Content>
		<Drawer.Header>
			<Drawer.Title>Pick a delivery time</Drawer.Title>
			<Drawer.Description>We&apos;ll prepare your order as soon as possible.</Drawer.Description>
		</Drawer.Header>
		<div class="flex-1 overflow-y-auto p-4">
			<RadioGroup.Root bind:value={deliveryTime} class="gap-2">
				{#each deliveryTimes as time (time.value)}
					<Field.Label for={time.id}>
						<Field.Field orientation="horizontal">
							<Field.Content>
								<Field.Title class="flex items-center gap-2">
									{time.label}
									{#if time.badge}
										<Badge variant="secondary">{time.badge}</Badge>
									{/if}
								</Field.Title>
								<Field.Description>{time.description}</Field.Description>
							</Field.Content>
							<RadioGroup.Item value={time.value} id={time.id} />
						</Field.Field>
					</Field.Label>
				{/each}
			</RadioGroup.Root>
		</div>
		<Drawer.Footer>
			<Button onclick={handleConfirm} class="h-[34px]">Confirm Delivery Time</Button>
			<Drawer.Close class={buttonVariants({ variant: "outline" })}>Cancel</Drawer.Close>
		</Drawer.Footer>
	</Drawer.Content>
</Drawer.Root>

About

Drawer is built on top of Vaul Svelte, which is a Svelte port of Vaul by Emil Kowalski.

Installation

pnpm dlx shadcn-svelte@latest add drawer

npx shadcn-svelte@latest add drawer

npx shadcn-svelte@latest add drawer

bun x shadcn-svelte@latest add drawer

Install `vaul-svelte`:

pnpm i vaul-svelte@next -D

npm i vaul-svelte@next -D

yarn install vaul-svelte@next -D

bun install vaul-svelte@next -D

Copy and paste the following code into your project.

<script lang="ts">
  import { Drawer as DrawerPrimitive } from "vaul-svelte";

  let { ref = $bindable(null), ...restProps }: DrawerPrimitive.CloseProps = $props();
</script>

<DrawerPrimitive.Close bind:ref data-slot="drawer-close" {...restProps} />

Usage

<script lang="ts">
  import * as Drawer from "$lib/components/ui/drawer/index.js";
</script>

<Drawer.Root>
  <Drawer.Trigger>Open</Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Are you absolutely sure?</Drawer.Title>
      <Drawer.Description>This action cannot be undone.</Drawer.Description>
    </Drawer.Header>
    <Drawer.Footer>
      <Button>Submit</Button>
      <Drawer.Close>Cancel</Drawer.Close>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Position

Use the direction prop to set the side of the drawer.

Available options are top, right, bottom, and left.

<script lang="ts">
	import * as Drawer from "$lib/components/ui/drawer/index.js";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
 
<Drawer.Root direction="left">
	<Drawer.Trigger class={buttonVariants({ variant: "secondary" })}>Open Left Drawer</Drawer.Trigger>
	<Drawer.Content>
		<Drawer.Header>
			<Drawer.Title>Move Goal</Drawer.Title>
			<Drawer.Description>Set your daily activity goal.</Drawer.Description>
		</Drawer.Header>
		<div class="flex-1 p-4">
			<div class="size-full rounded-2xl bg-muted"></div>
		</div>
		<Drawer.Footer>
			<Drawer.Close class={buttonVariants()}>Close</Drawer.Close>
		</Drawer.Footer>
	</Drawer.Content>
</Drawer.Root>

Nested

Open drawers from inside another drawer using <Drawer.NestedRoot />. Parent drawers stay mounted and stack behind the frontmost drawer.

<script lang="ts">
	import * as Drawer from "$lib/components/ui/drawer/index.js";
	import { IsMobile } from "$lib/components/hooks/is-mobile.svelte.js";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
 
	const isMobile = new IsMobile();
	const direction = $derived(isMobile.current ? "bottom" : "right");
</script>
 
{#snippet placeholder()}
	<div class="flex-1 p-4">
		<div
			class="bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:aspect-video group-data-[vaul-drawer-direction=bottom]/drawer-content:w-full group-data-[vaul-drawer-direction=right]/drawer-content:size-full"
		></div>
	</div>
{/snippet}
 
<Drawer.Root {direction}>
	<Drawer.Trigger class={buttonVariants({ variant: "secondary" })}>Open Drawer</Drawer.Trigger>
	<Drawer.Content>
		<Drawer.Header>
			<Drawer.Title>Drawer</Drawer.Title>
			<Drawer.Description>Open another drawer from the same direction.</Drawer.Description>
		</Drawer.Header>
		{@render placeholder()}
		<Drawer.Footer>
			<Drawer.NestedRoot {direction}>
				<Drawer.Trigger class={buttonVariants({ variant: "outline" })}>
					Open Nested Drawer
				</Drawer.Trigger>
				<Drawer.Content>
					<Drawer.Header>
						<Drawer.Title>Nested Drawer</Drawer.Title>
						<Drawer.Description>
							The parent drawer stays mounted behind this one.
						</Drawer.Description>
					</Drawer.Header>
					{@render placeholder()}
					<Drawer.Footer>
						<Drawer.NestedRoot {direction}>
							<Drawer.Trigger class={buttonVariants({ variant: "outline" })}>
								Open Third Drawer
							</Drawer.Trigger>
							<Drawer.Content>
								<Drawer.Header>
									<Drawer.Title>Third Drawer</Drawer.Title>
									<Drawer.Description>Two drawers are stacked behind this one.</Drawer.Description>
								</Drawer.Header>
								{@render placeholder()}
								<Drawer.Footer>
									<Drawer.NestedRoot {direction}>
										<Drawer.Trigger class={buttonVariants({ variant: "outline" })}>
											Open Fourth Drawer
										</Drawer.Trigger>
										<Drawer.Content>
											<Drawer.Header>
												<Drawer.Title>Fourth Drawer</Drawer.Title>
												<Drawer.Description>
													This is the frontmost drawer in the stack.
												</Drawer.Description>
											</Drawer.Header>
											{@render placeholder()}
											<Drawer.Footer>
												<Drawer.Close class={buttonVariants({ variant: "outline" })}>
													Close
												</Drawer.Close>
											</Drawer.Footer>
										</Drawer.Content>
									</Drawer.NestedRoot>
									<Drawer.Close class={buttonVariants({ variant: "outline" })}>Close</Drawer.Close>
								</Drawer.Footer>
							</Drawer.Content>
						</Drawer.NestedRoot>
						<Drawer.Close class={buttonVariants({ variant: "outline" })}>Close</Drawer.Close>
					</Drawer.Footer>
				</Drawer.Content>
			</Drawer.NestedRoot>
			<Drawer.Close class={buttonVariants({ variant: "outline" })}>Close</Drawer.Close>
		</Drawer.Footer>
	</Drawer.Content>
</Drawer.Root>

Set modal={false} to allow interaction with the rest of the page while the drawer is open. Clicking outside a non-modal drawer does not close it.

<script lang="ts">
	import * as Drawer from "$lib/components/ui/drawer/index.js";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
 
<Drawer.Root modal={false} direction="right">
	<Drawer.Trigger class={buttonVariants({ variant: "outline" })}>Non Modal</Drawer.Trigger>
	<Drawer.Content>
		<Drawer.Header>
			<Drawer.Title>Non Modal Drawer</Drawer.Title>
		</Drawer.Header>
		<div class="flex-1 p-4">
			<div class="size-full rounded-2xl bg-muted"></div>
		</div>
		<Drawer.Footer>
			<Drawer.Close class={buttonVariants()}>Close</Drawer.Close>
		</Drawer.Footer>
	</Drawer.Content>
</Drawer.Root>

Snap Points

Use snapPoints to snap a drawer to preset heights. Numbers between 0 and 1 represent fractions of the viewport. String values support px units. Snap points apply to vertical drawers.

Track the active snap point with bind:activeSnapPoint.

<script lang="ts">
	import * as Drawer from "$lib/components/ui/drawer/index.js";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
 
	const SNAP_POINTS = ["496px", 1];
 
	let snapPoint = $state<string | number | null>(SNAP_POINTS[0]);
</script>
 
<Drawer.Root snapPoints={SNAP_POINTS} bind:activeSnapPoint={snapPoint}>
	<Drawer.Trigger class={buttonVariants({ variant: "outline" })}>Open Snap Drawer</Drawer.Trigger>
	<Drawer.Content class="h-full data-[vaul-drawer-direction=bottom]:max-h-[97%]">
		<Drawer.Header>
			<Drawer.Title>Snap points</Drawer.Title>
			<Drawer.Description>
				Drag the drawer to snap between a compact peek and a near full-height view.
			</Drawer.Description>
		</Drawer.Header>
		<div class="p-4">
			<div class="h-80 w-full rounded-2xl bg-muted"></div>
		</div>
		<Drawer.Footer>
			<Drawer.Close class={buttonVariants()}>Close</Drawer.Close>
		</Drawer.Footer>
	</Drawer.Content>
</Drawer.Root>

Responsive

You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog component on desktop and a Drawer on mobile.

<script lang="ts">
	import { MediaQuery } from "svelte/reactivity";
	import * as Dialog from "$lib/components/ui/dialog/index.js";
	import * as Drawer from "$lib/components/ui/drawer/index.js";
	import { Button, buttonVariants } from "$lib/components/ui/button/index.js";
	import { Input } from "$lib/components/ui/input/index.js";
	import { Label } from "$lib/components/ui/label/index.js";
 
	let open = $state(false);
	const isDesktop = new MediaQuery("(min-width: 768px)");
 
	const id = $props.id();
</script>
 
{#if isDesktop.current}
	<Dialog.Root bind:open>
		<Dialog.Trigger class={buttonVariants({ variant: "outline" })}>Edit Profile</Dialog.Trigger>
		<Dialog.Content class="sm:max-w-[425px]">
			<Dialog.Header>
				<Dialog.Title>Edit profile</Dialog.Title>
				<Dialog.Description>
					Make changes to your profile here. Click save when you're done.
				</Dialog.Description>
			</Dialog.Header>
			<form class="grid items-start gap-6">
				<div class="grid gap-3">
					<Label for="email-{id}">Email</Label>
					<Input type="email" id="email-{id}" value="shadcn@example.com" />
				</div>
				<div class="grid gap-3">
					<Label for="username-{id}">Username</Label>
					<Input id="username-{id}" value="@shadcn" />
				</div>
				<Button type="submit">Save changes</Button>
			</form>
		</Dialog.Content>
	</Dialog.Root>
{:else}
	<Drawer.Root bind:open>
		<Drawer.Trigger class={buttonVariants({ variant: "outline" })}>Edit Profile</Drawer.Trigger>
		<Drawer.Content>
			<Drawer.Header class="text-start">
				<Drawer.Title>Edit profile</Drawer.Title>
				<Drawer.Description>
					Make changes to your profile here. Click save when you're done.
				</Drawer.Description>
			</Drawer.Header>
			<form class="grid items-start gap-6 p-4">
				<div class="grid gap-3">
					<Label for="email-{id}">Email</Label>
					<Input type="email" id="email-{id}" value="shadcn@example.com" />
				</div>
				<div class="grid gap-3">
					<Label for="username-{id}">Username</Label>
					<Input id="username-{id}" value="@shadcn" />
				</div>
				<Button type="submit">Save changes</Button>
			</form>
		</Drawer.Content>
	</Drawer.Root>
{/if}

Dialog Dropdown Menu

Epicenter

Drawer

Epicenter

Install vaul-svelte:

Copy and paste the following code into your project.

Install `vaul-svelte`: