Documentation Index
Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
Use this file to discover all available pages before exploring further.
About
Drawer is built on top of Vaul Svelte, which is a Svelte port of Vaul by Emil Kowalski.
Installation
npx shadcn-svelte@next add drawer
Install vaul-svelte
npm install vaul-svelte@next -D
Copy component code
Copy and paste the component source code into your project.
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 sure 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>
Examples
Responsive Dialog
You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog on desktop and a Drawer on mobile.