diff --git a/src/shared/ui/Drawer/Drawer.svelte b/src/shared/ui/Drawer/Drawer.svelte
new file mode 100644
index 0000000..cf723a3
--- /dev/null
+++ b/src/shared/ui/Drawer/Drawer.svelte
@@ -0,0 +1,41 @@
+<!-- Component: Drawer -->
+<script lang="ts">
+import { Button } from '$shared/shadcn/ui/button';
+import {
+    Content as DrawerContent,
+    Footer as DrawerFooter,
+    Header as DrawerHeader,
+    Root as DrawerRoot,
+    Trigger as DrawerTrigger,
+} from '$shared/shadcn/ui/drawer';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import type { Snippet } from 'svelte';
+
+interface Props {
+    isOpen?: boolean;
+    trigger?: Snippet<[{ isOpen: boolean; onClick: () => void }]>;
+    content?: Snippet<[{ isOpen: boolean }]>;
+    contentClassName?: string;
+}
+
+let { isOpen = $bindable(false), trigger, content, contentClassName }: Props = $props();
+
+function handleClick() {
+    isOpen = !isOpen;
+}
+</script>
+
+<DrawerRoot bind:open={isOpen}>
+    <DrawerTrigger>
+        {#if trigger}
+            {@render trigger({ isOpen, onClick: handleClick })}
+        {:else}
+            <Button onclick={handleClick}>
+                Open
+            </Button>
+        {/if}
+    </DrawerTrigger>
+    <DrawerContent class={cn('min-h-60', contentClassName)}>
+        {@render content?.({ isOpen })}
+    </DrawerContent>
+</DrawerRoot>