diff --git a/web-common/src/features/custom-viz/examples/ChartTypesDialog.svelte b/web-common/src/features/custom-viz/examples/ChartTypesDialog.svelte
index 364021d917c..47512c9c629 100644
--- a/web-common/src/features/custom-viz/examples/ChartTypesDialog.svelte
+++ b/web-common/src/features/custom-viz/examples/ChartTypesDialog.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { page } from "$app/stores";
   import { Button } from "@rilldata/web-common/components/button";
   import * as Dialog from "@rilldata/web-common/components/dialog";
   import Search from "@rilldata/web-common/components/search/Search.svelte";
@@ -17,6 +18,7 @@
   import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
   import { CUSTOM_VIZ_FOLDER } from "@rilldata/web-common/features/custom-viz/params";
+  import { removeLeadingSlash } from "@rilldata/web-common/features/entity-management/entity-mappers.ts";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import ExampleCard from "./ExampleCard.svelte";
   import {
@@ -49,6 +51,15 @@
       .finally(() => (loading = false));
   }
 
+  $: currentFile = $page.params.file;
+  $: currentDirectory = currentFile
+    ? currentFile.split("/").slice(0, -1).join("/")
+    : "";
+  $: componentFolder =
+    currentDirectory !== ""
+      ? removeLeadingSlash(currentDirectory)
+      : CUSTOM_VIZ_FOLDER;
+
   $: componentsQuery = useFilteredResources(client, ResourceKind.Component);
   $: existingNames = ($componentsQuery?.data ?? [])
     .map((res) => res.meta?.name?.name)
@@ -111,7 +122,7 @@
       client,
       ResourceKind.Component,
       undefined,
-      CUSTOM_VIZ_FOLDER,
+      componentFolder,
     );
   }
 
diff --git a/web-common/src/features/entity-management/add/new-files.spec.ts b/web-common/src/features/entity-management/add/new-files.spec.ts
new file mode 100644
index 00000000000..fc2fd891131
--- /dev/null
+++ b/web-common/src/features/entity-management/add/new-files.spec.ts
@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import { ResourceKind } from "../resource-selectors.ts";
+import { getPathForNewResourceFile } from "./new-files.ts";
+
+describe("getPathForNewResourceFile", () => {
+  it("uses the current directory when creating a component", () => {
+    expect(
+      getPathForNewResourceFile(ResourceKind.Component, undefined, "Something"),
+    ).toMatch(/^Something\/component/);
+  });
+});