diff --git a/.changeset/tall-jobs-wait.md b/.changeset/tall-jobs-wait.md
new file mode 100644
index 0000000000..3f54711a5a
--- /dev/null
+++ b/.changeset/tall-jobs-wait.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+chore: Update Table of Contents to include optional `prefix` and `suffix` parameters
diff --git a/packages/skeleton/src/lib/utilities/TableOfContents/crawler.ts b/packages/skeleton/src/lib/utilities/TableOfContents/crawler.ts
index 996f1c3f5c..dfee9b4c52 100644
--- a/packages/skeleton/src/lib/utilities/TableOfContents/crawler.ts
+++ b/packages/skeleton/src/lib/utilities/TableOfContents/crawler.ts
@@ -12,6 +12,10 @@ interface TOCCrawlerArgs {
 	scrollTarget?: string;
 	/** Reload the action when this key value changes. */
 	key?: unknown;
+	/* Provide a prefix for ToC links, to help keep them unique. */
+	prefix?: string;
+	/* Provide a suffix for ToC links, to help keep them unique. */
+	suffix?: string;
 }
 
 export function tocCrawler(node: HTMLElement, args?: TOCCrawlerArgs) {
@@ -44,7 +48,9 @@ export function tocCrawler(node: HTMLElement, args?: TOCCrawlerArgs) {
 					.replaceAll(/[^a-zA-Z0-9 ]/g, '')
 					.replaceAll(' ', '-')
 					.toLowerCase();
-				elemHeading.id = `toc-${newHeadingId}`;
+				const prefix = args.prefix ? `${args.prefix}-` : '';
+				const suffix = args.suffix ? `-${args.suffix}` : '';
+				elemHeading.id = prefix + newHeadingId + suffix;
 			}
 			// Push heading data to the permalink array
 			permalinks.push({
diff --git a/sites/skeleton.dev/src/routes/(inner)/elements/chat/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/elements/chat/+page.svelte
index 9ec67b5b85..695933a08e 100644
--- a/sites/skeleton.dev/src/routes/(inner)/elements/chat/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/elements/chat/+page.svelte
@@ -473,7 +473,8 @@ let messageFeed = [
 		</section>
 
 		<section class="space-y-4">
-			<h2 class="h2">Prompt</h2>
+			<!-- NOTE: id provided to avoid ToC conflict -->
+			<h2 class="h2" id="prompt-field">Prompt</h2>
 			<p>
 				We can utilize a Skeleton <a class="anchor" href="/elements/forms">Input Group</a> to create a custom text prompt.
 			</p>
diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/table-of-contents/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/table-of-contents/+page.svelte
index 52b2d76217..0c5e377091 100644
--- a/sites/skeleton.dev/src/routes/(inner)/utilities/table-of-contents/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/utilities/table-of-contents/+page.svelte
@@ -79,10 +79,24 @@
 				code={`
 <!-- Before: -->
 <h2 class="h2">Title One</h2>
-<h2 class="h2" id="toc-my-custom-id">Title Two</h2>\n
+<h2 class="h2" id="my-custom-id">Title Two</h2>\n
 <!-- After: -->
 <h2 class="h2" id="title-one">Title One</h2>
 <h2 class="h2" id="my-custom-id">Title Two</h2>
+			`}
+			/>
+			<!-- Prefixes and Suffixes -->
+			<h3 class="h3">Prefixes and Suffixes</h3>
+			<!-- prettier-ignore -->
+			<p>
+				We recommend setting a custom heading (per the instruction above) if a conflict is found within your page. However, you may also hardcode a <code class="code">prefix</code> or <code class="code">suffix</code> to all generated IDs as follows:
+			</p>
+			<CodeBlock
+				language="html"
+				code={`
+<div use:tocCrawler={{ mode: 'generate', prefix: 'foo', suffix: 'bar' }}>\n
+<!-- Ex: foo-title-one-bar -->
+<!-- Ex: foo-title-two-bar -->
 			`}
 			/>
 			<!-- Ignore Headings -->