huntabyte__shadcn-svelte/docs/content/components/drawer.md

title, description, component, links

title	description	component	links
Drawer	A drawer component for Svelte.	true	source doc https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/drawer https://github.com/huntabyte/vaul-svelte

<script> import ComponentPreview from "$lib/components/component-preview.svelte"; import ComponentSource from "$lib/components/component-source.svelte"; import PMAddComp from "$lib/components/pm-add-comp.svelte"; import PMInstall from "$lib/components/pm-install.svelte"; import Steps from "$lib/components/steps.svelte"; import Step from "$lib/components/step.svelte"; import InstallTabs from "$lib/components/install-tabs.svelte"; let { viewerData } = $props(); </script>

About

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

Installation

{#snippet cli()} {/snippet} {#snippet manual()}

Install vaul-svelte:

Copy and paste the following code into your project.

{#if viewerData} {/if} {/snippet}

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

Sides

Use the direction prop to set the side of the drawer. Available options are top, right, bottom, and left.

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.