Drawer

A panel that slides in from an edge of the screen and can be swiped away.

Demo

Swipe Handle

Position

Custom Width and Height

Scrollable Content

Snap Points

Nested

Non Modal

<script lang="ts">
  import { Example, ExampleWrapper } from '@sveltery/components/example';
  import { Button } from '@sveltery/components/button';
  import {
    Drawer,
    DrawerClose,
    DrawerContent,
    DrawerDescription,
    DrawerFooter,
    DrawerHeader,
    DrawerTitle,
    DrawerTrigger,
  } from '@sveltery/components/drawer';

  const PARAGRAPHS = [
    "Your changes are saved automatically as you type.",
    "Delivery usually takes three to five business days, depending on your location and the shipping method you selected at checkout.",
    "We use your email address for account notifications and order updates. You can change this anytime from your profile settings.",
    "Two-factor authentication adds an extra layer of security to your account. When enabled, you'll need to enter a code from your authenticator app in addition to your password. We recommend enabling it if you store payment methods or sensitive information.",
    "By continuing, you agree to our Terms of Service and Privacy Policy. We collect usage data to improve the product, personalize your experience, and troubleshoot issues. You can export or delete your data at any time from the account settings page. Third-party integrations may have their own policies, and you should review them before connecting external services.",
    "Refunds are processed within five to ten business days after we receive your return. Items must be unused and in their original packaging to qualify. Shipping costs are non-refundable unless the return is due to our error or a defective product. Once approved, the refund is issued to your original payment method; credit card refunds may take an additional billing cycle to appear on your statement. If you paid with store credit, the balance is restored to your account immediately. Contact support if you haven't received your refund after two weeks.",
    "Last updated March 12, 2026.",
    "Upgrade to Pro for unlimited projects, priority support, and advanced analytics. Cancel anytime from billing settings.",
    "You haven't verified your email yet. Check your inbox for a confirmation link—we sent it when you signed up. The link expires after 24 hours, but you can request a new one below.",
    "API requests are rate-limited to 1,000 calls per hour on the free plan. Exceeding the limit returns a 429 response with a Retry-After header. Upgrade to a paid plan for higher limits and dedicated support. Webhook deliveries are retried up to three times with exponential backoff if your endpoint returns a non-2xx status.",
    "No payment method on file.",
    "Our design team rebuilt the checkout flow last quarter after interviews with forty-two customers. The biggest friction point was surprise fees at the final step, so we moved shipping and tax estimates earlier in the process. Early tests show a twelve percent drop in cart abandonment. We're still rolling out the update region by region, and you may see the old flow until your account is migrated.",
  ];

  const DRAWER_SIDES = ['up', 'right', 'down', 'left'] as const;
  const SNAP_POINTS = ['31rem', 1];
  const panel = 'bg-muted group-data-[swipe-axis=x]/drawer-popup:size-full group-data-[swipe-axis=y]/drawer-popup:h-80 group-data-[swipe-axis=y]/drawer-popup:w-full';
</script>

{#snippet paragraphs(length: number)}
  {#each { length } as _, index (index)}
    <p class="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed">{PARAGRAPHS[index % PARAGRAPHS.length]}</p>
  {/each}
{/snippet}

{#snippet DrawerDemo()}
  <Example title="Demo">
    <div class="flex flex-wrap gap-2">
      <Drawer>
        <DrawerTrigger>
          {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
          Open Drawer
        </DrawerTrigger>
        <DrawerContent>
          <div class="p-4">
            <div class="h-80 w-full bg-muted"></div>
          </div>
        </DrawerContent>
      </Drawer>
      <Drawer>
        <DrawerTrigger>
          {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
          Header
        </DrawerTrigger>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Edit profile</DrawerTitle>
            <DrawerDescription>Make changes to your profile here. Click save when you&apos;re done.</DrawerDescription>
          </DrawerHeader>
          <div class="p-4">
            <div class="h-80 w-full bg-muted"></div>
          </div>
        </DrawerContent>
      </Drawer>
      <Drawer>
        <DrawerTrigger>
          {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
          Footer
        </DrawerTrigger>
        <DrawerContent>
          <div class="p-4">
            <div class="h-80 w-full bg-muted"></div>
          </div>
          <DrawerFooter>
            <Button>Submit</Button>
            <DrawerClose>
              {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
              Cancel
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
      <Drawer>
        <DrawerTrigger>
          {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
          Header and Footer
        </DrawerTrigger>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Edit profile</DrawerTitle>
            <DrawerDescription>Make changes to your profile here. Click save when you&apos;re done.</DrawerDescription>
          </DrawerHeader>
          <div class="p-4">
            <div class="h-80 w-full bg-muted"></div>
          </div>
          <DrawerFooter>
            <Button>Submit</Button>
            <DrawerClose>
              {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
              Cancel
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
      <Drawer>
        <DrawerTrigger>
          {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
          Edge to Edge
        </DrawerTrigger>
        <DrawerContent>
          <div class="h-80 w-full bg-blue-200"></div>
        </DrawerContent>
      </Drawer>
    </div>
  </Example>
{/snippet}

{#snippet DrawerSwipeHandleExample()}
  <Example title="Swipe Handle">
    <div class="flex flex-wrap gap-2">
      {#each DRAWER_SIDES as side (side)}
        <Drawer swipeDirection={side} showSwipeHandle>
          <DrawerTrigger>
            {#snippet render(props, _state, content)}<Button variant="outline" class="capitalize" {...props}>{@render content?.()}</Button>{/snippet}
            {side}
          </DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle class="capitalize">Drawer</DrawerTitle>
              <DrawerDescription>Drawer with a swipe handle.</DrawerDescription>
            </DrawerHeader>
            <div class="flex-1 p-4">
              <div class={panel}></div>
            </div>
          </DrawerContent>
        </Drawer>
      {/each}
    </div>
  </Example>
{/snippet}

{#snippet DrawerPosition()}
  <Example title="Position">
    <div class="flex flex-wrap gap-2">
      {#each DRAWER_SIDES as side (side)}
        <Drawer swipeDirection={side}>
          <DrawerTrigger>
            {#snippet render(props, _state, content)}<Button variant="outline" class="capitalize" {...props}>{@render content?.()}</Button>{/snippet}
            {side}
          </DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>Move Goal</DrawerTitle>
              <DrawerDescription>Set your daily activity goal.</DrawerDescription>
            </DrawerHeader>
            <div class="flex-1 p-4">
              <div class={panel}></div>
            </div>
            <DrawerFooter>
              <Button>Submit</Button>
              <DrawerClose>
                {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
                Cancel
              </DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      {/each}
    </div>
  </Example>
{/snippet}

{#snippet DrawerCustomWidthAndHeight()}
  <Example title="Custom Width and Height">
    <div class="flex flex-wrap gap-2">
      <Drawer swipeDirection="down">
        <DrawerTrigger>
          {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
          Down
        </DrawerTrigger>
        <DrawerContent class="data-[swipe-direction=down]:h-64">
          <DrawerHeader>
            <DrawerTitle>Down drawer</DrawerTitle>
            <DrawerDescription>Drawer with a custom height.</DrawerDescription>
          </DrawerHeader>
          <div class="flex-1 scroll-fade scrollbar-thin overflow-y-auto p-4">
            {@render paragraphs(10)}
          </div>
          <DrawerFooter>
            <DrawerClose>
              {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
              Close
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
      <Drawer swipeDirection="up">
        <DrawerTrigger>
          {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
          Up
        </DrawerTrigger>
        <DrawerContent class="data-[swipe-direction=up]:h-[50vh]">
          <DrawerHeader>
            <DrawerTitle>Up drawer</DrawerTitle>
            <DrawerDescription>Drawer with a custom height.</DrawerDescription>
          </DrawerHeader>
          <div class="flex-1 scroll-fade overflow-y-auto p-4">
            {@render paragraphs(10)}
          </div>
          <DrawerFooter>
            <DrawerClose>
              {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
              Close
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
      <Drawer swipeDirection="left">
        <DrawerTrigger>
          {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
          Left
        </DrawerTrigger>
        <DrawerContent class="data-[swipe-direction=left]:w-xl">
          <DrawerHeader>
            <DrawerTitle>Left drawer</DrawerTitle>
            <DrawerDescription>Drawer with a custom width.</DrawerDescription>
          </DrawerHeader>
          <div class="flex-1 scroll-fade overflow-y-auto p-4">
            {@render paragraphs(10)}
          </div>
          <DrawerFooter>
            <DrawerClose>
              {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
              Close
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
      <Drawer swipeDirection="right">
        <DrawerTrigger>
          {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
          Right
        </DrawerTrigger>
        <DrawerContent class="data-[swipe-direction=right]:w-xs">
          <DrawerHeader>
            <DrawerTitle>Right drawer</DrawerTitle>
            <DrawerDescription>Drawer with a custom width.</DrawerDescription>
          </DrawerHeader>
          <div class="flex-1 scroll-fade overflow-y-auto p-4">
            {@render paragraphs(10)}
          </div>
          <DrawerFooter>
            <DrawerClose>
              {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
              Close
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </div>
  </Example>
{/snippet}

{#snippet DrawerScrollable()}
  <Example title="Scrollable Content">
    <div class="flex flex-wrap gap-2">
      {#each DRAWER_SIDES as side (side)}
        <Drawer swipeDirection={side}>
          <DrawerTrigger>
            {#snippet render(props, _state, content)}<Button variant="outline" class="capitalize" {...props}>{@render content?.()}</Button>{/snippet}
            {side}
          </DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>Move Goal</DrawerTitle>
              <DrawerDescription>Set your daily activity goal.</DrawerDescription>
            </DrawerHeader>
            <div class="flex-1 scroll-fade overflow-y-auto p-4">
              {@render paragraphs(20)}
            </div>
            <DrawerFooter>
              <Button>Submit</Button>
              <DrawerClose>
                {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
                Cancel
              </DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      {/each}
    </div>
  </Example>
{/snippet}

{#snippet DrawerSnapPoints()}
  <Example title="Snap Points">
    <Drawer snapPoints={SNAP_POINTS} showSwipeHandle>
      <DrawerTrigger>
        {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
        Open Snap Drawer
      </DrawerTrigger>
      <DrawerContent class="max-h-[calc(100dvh-1rem)]">
        <DrawerHeader>
          <DrawerTitle>Snap points</DrawerTitle>
          <DrawerDescription>Drag the drawer to snap between a compact peek and a near full-height view.</DrawerDescription>
        </DrawerHeader>
        <div class="grid flex-1 scroll-fade gap-3 overflow-y-auto p-4">
          {#each { length: 16 } as _, index (index)}
            <div class="h-12 bg-muted"></div>
          {/each}
        </div>
      </DrawerContent>
    </Drawer>
  </Example>
{/snippet}

{#snippet DrawerNested()}
  <Example title="Nested">
    <div class="flex flex-wrap gap-2">
      {#each DRAWER_SIDES as side (side)}
        <Drawer swipeDirection={side} showSwipeHandle>
          <DrawerTrigger>
            {#snippet render(props, _state, content)}<Button variant="outline" class="capitalize" {...props}>{@render content?.()}</Button>{/snippet}
            {side}
          </DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle class="capitalize">{side} drawer</DrawerTitle>
              <DrawerDescription>Open another drawer from the same direction.</DrawerDescription>
            </DrawerHeader>
            <div class="flex-1 p-4">
              <div class={panel}></div>
            </div>
            <DrawerFooter>
              <Drawer swipeDirection={side}>
                <DrawerTrigger>
                  {#snippet render(props, _state, content)}<Button {...props}>{@render content?.()}</Button>{/snippet}
                  Open nested drawer
                </DrawerTrigger>
                <DrawerContent>
                  <DrawerHeader>
                    <DrawerTitle>Nested drawer</DrawerTitle>
                    <DrawerDescription>The parent drawer stays mounted behind this one.</DrawerDescription>
                  </DrawerHeader>
                  <div class="flex-1 p-4">
                    <div class={panel}></div>
                  </div>
                  <DrawerFooter>
                    <Drawer swipeDirection={side}>
                      <DrawerTrigger>
                        {#snippet render(props, _state, content)}<Button {...props}>{@render content?.()}</Button>{/snippet}
                        Open third drawer
                      </DrawerTrigger>
                      <DrawerContent>
                        <DrawerHeader>
                          <DrawerTitle>Third drawer</DrawerTitle>
                          <DrawerDescription>This is the frontmost drawer in the stack.</DrawerDescription>
                        </DrawerHeader>
                        <div class="flex-1 p-4">
                          <div class={panel}></div>
                        </div>
                        <DrawerFooter>
                          <DrawerClose>
                            {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
                            Close
                          </DrawerClose>
                        </DrawerFooter>
                      </DrawerContent>
                    </Drawer>
                    <DrawerClose>
                      {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
                      Close
                    </DrawerClose>
                  </DrawerFooter>
                </DrawerContent>
              </Drawer>
              <DrawerClose>
                {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
                Close
              </DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      {/each}
    </div>
  </Example>
{/snippet}

{#snippet DrawerNonModal()}
  <Example title="Non Modal">
    <Drawer modal={false} disablePointerDismissal swipeDirection="right">
      <DrawerTrigger>
        {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
        Non Modal
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Non Modal Drawer</DrawerTitle>
        </DrawerHeader>
        <div class="flex-1 p-4">
          <div class={panel}></div>
        </div>
        <DrawerFooter>
          <DrawerClose>
            {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
            Close
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  </Example>
{/snippet}

<ExampleWrapper>
  {@render DrawerDemo()}
  {@render DrawerSwipeHandleExample()}
  {@render DrawerPosition()}
  {@render DrawerCustomWidthAndHeight()}
  {@render DrawerScrollable()}
  {@render DrawerSnapPoints()}
  {@render DrawerNested()}
  {@render DrawerNonModal()}
</ExampleWrapper>

Installation

Install the dependencies

pnpm add cn github:sveltery/base

Copy the component

Copy the following files into src/lib/components/ui/drawer.

src/lib/components/ui/drawer/Drawer.svelte

<script lang="ts" generics="Payload = unknown">
  import { Drawer as Primitive, type DrawerRootProps } from '@sveltery/base/drawer';
  import { setDrawerContext } from './context.js';
  let { open = $bindable(), snapPoint = $bindable(), triggerId = $bindable(), modal = true, showSwipeHandle = false, snapPoints, swipeDirection = 'down', ...props }: DrawerRootProps<Payload> & { showSwipeHandle?: boolean } = $props();

  setDrawerContext({
    get hasSnapPoints() { return snapPoints != null && snapPoints.length > 0; },
    get modal() { return modal; },
    get showSwipeHandle() { return showSwipeHandle; },
    get swipeDirection() { return swipeDirection; },
  });
</script>
<Primitive.Root bind:open bind:snapPoint bind:triggerId {modal} {snapPoints} {swipeDirection} {...props} />

src/lib/components/ui/drawer/DrawerClose.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Drawer as Primitive } from '@sveltery/base/drawer';
  let { children, ...props }: ComponentProps<typeof Primitive.Close> = $props();
</script>
<Primitive.Close data-slot="drawer-close" {children} {...props} />

src/lib/components/ui/drawer/DrawerContent.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Drawer as Primitive } from '@sveltery/base/drawer';
  import { cn } from 'cn';
  import { useDrawer } from './context.js';
  import DrawerPortal from './DrawerPortal.svelte';
  import DrawerOverlay from './DrawerOverlay.svelte';
  import DrawerSwipeHandle from './DrawerSwipeHandle.svelte';
  let { children, class: classProp, ...props }: ComponentProps<typeof Primitive.Popup> = $props();
  const drawer = useDrawer();
  const swipeAxis = $derived(drawer.swipeDirection === 'down' || drawer.swipeDirection === 'up' ? 'y' : 'x');
</script>
<DrawerPortal>
  {#if drawer.modal === true}
    <DrawerOverlay data-snap-points={drawer.hasSnapPoints ? '' : undefined} />
  {/if}
  <Primitive.Viewport data-slot="drawer-viewport" data-modal={drawer.modal} class="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto">
    <Primitive.Popup
      data-slot="drawer-popup"
      data-swipe-axis={swipeAxis}
      data-snap-points={drawer.hasSnapPoints ? '' : undefined}
      {...props}
      class={cn(
        'bg-popover text-popover-foreground text-sm data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords]',
        'data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95',
        'after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full',
        '[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]',
        '[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]',
        'data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]',
        'data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)',
        'data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row',
        'data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]',
        'data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]',
        'data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]',
        'data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]',
        classProp,
      )}
    >
      {#if drawer.showSwipeHandle}
        <DrawerSwipeHandle />
      {/if}
      <Primitive.Content data-slot="drawer-content" class="flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none">
        {@render children?.()}
      </Primitive.Content>
    </Primitive.Popup>
  </Primitive.Viewport>
</DrawerPortal>

src/lib/components/ui/drawer/DrawerDescription.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Drawer as Primitive } from '@sveltery/base/drawer';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: ComponentProps<typeof Primitive.Description> = $props();
</script>
<Primitive.Description data-slot="drawer-description" {children} {...props} class={cn('text-muted-foreground text-sm text-balance', classProp)} />

src/lib/components/ui/drawer/DrawerFooter.svelte

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: HTMLAttributes<HTMLDivElement> = $props();
</script>
<div data-slot="drawer-footer" {...props} class={cn('gap-2 p-4 pt-0 mt-auto flex shrink-0 flex-col', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/drawer/DrawerHeader.svelte

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: HTMLAttributes<HTMLDivElement> = $props();
</script>
<div data-slot="drawer-header" {...props} class={cn('gap-0.5 p-4 pb-0 md:gap-0.5 md:text-left flex shrink-0 flex-col group-data-[swipe-axis=y]/drawer-popup:text-center', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/drawer/DrawerOverlay.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Drawer as Primitive } from '@sveltery/base/drawer';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: ComponentProps<typeof Primitive.Backdrop> = $props();
</script>
<Primitive.Backdrop data-slot="drawer-overlay" {children} {...props} class={cn('bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50 min-h-dvh opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute', classProp)} />

src/lib/components/ui/drawer/DrawerPortal.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Drawer as Primitive } from '@sveltery/base/drawer';
  let { children, ...props }: ComponentProps<typeof Primitive.Portal> = $props();
</script>
<Primitive.Portal data-slot="drawer-portal" {...props}>
  {@render children?.()}
</Primitive.Portal>

src/lib/components/ui/drawer/DrawerSwipeHandle.svelte

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: HTMLAttributes<HTMLDivElement> = $props();
</script>
<div data-slot="drawer-swipe-handle" aria-hidden="true" {...props} class={cn('after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=up]/drawer-popup:items-start group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:order-last active:cursor-grabbing', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/drawer/DrawerTitle.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Drawer as Primitive } from '@sveltery/base/drawer';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: ComponentProps<typeof Primitive.Title> = $props();
</script>
<Primitive.Title data-slot="drawer-title" {children} {...props} class={cn('text-foreground text-base font-medium', classProp)} />

src/lib/components/ui/drawer/DrawerTrigger.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Drawer as Primitive } from '@sveltery/base/drawer';
  let { children, ...props }: ComponentProps<typeof Primitive.Trigger> = $props();
</script>
<Primitive.Trigger data-slot="drawer-trigger" {children} {...props} />

src/lib/components/ui/drawer/context.ts

import { createContext } from 'svelte';
import type { DrawerRootProps, DrawerSwipeDirection } from '@sveltery/base/drawer';

export type DrawerContextValue = {
  readonly hasSnapPoints: boolean;
  readonly modal: DrawerRootProps['modal'];
  readonly showSwipeHandle: boolean;
  readonly swipeDirection: DrawerSwipeDirection;
};

export const [useDrawer, setDrawerContext] = createContext<DrawerContextValue>();

src/lib/components/ui/drawer/index.ts

export { default as Drawer } from './Drawer.svelte';
export { default as DrawerTrigger } from './DrawerTrigger.svelte';
export { default as DrawerPortal } from './DrawerPortal.svelte';
export { default as DrawerClose } from './DrawerClose.svelte';
export { default as DrawerOverlay } from './DrawerOverlay.svelte';
export { default as DrawerSwipeHandle } from './DrawerSwipeHandle.svelte';
export { default as DrawerContent } from './DrawerContent.svelte';
export { default as DrawerHeader } from './DrawerHeader.svelte';
export { default as DrawerFooter } from './DrawerFooter.svelte';
export { default as DrawerTitle } from './DrawerTitle.svelte';
export { default as DrawerDescription } from './DrawerDescription.svelte';

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '$lib/components/ui/drawer';
  let open = $state(false);
</script>

<Drawer bind:open>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <DrawerClose>Cancel</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

The drawer opens from the bottom edge. Escape, a press outside, the Close button or a swipe toward the edge closes it.

swipeDirection on Drawer sets the edge the drawer is attached to and the direction a swipe dismisses it in: up, right, down (default) or left. A drawer on the left or right edge is 75% of the viewport wide, and 24rem from the sm breakpoint. Pass a class such as data-[swipe-direction=right]:w-xs to DrawerContent to change the size.

Swipe handle

showSwipeHandle on Drawer adds a grab handle on the edge the drawer is swiped from.

Snap points

snapPoints lets the drawer rest at several heights. Numbers from 0 to 1 are fractions of the viewport height, larger numbers are pixels, and strings take px or rem units. Use bind:snapPoint to read or set the active snap point.

<Drawer snapPoints={['31rem', 1]} showSwipeHandle>…</Drawer>