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 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"; </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 component source files linked at the top of this page into your project.

{/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

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.