diff --git a/apps/docs/src/components/table-of-contents.tsx b/apps/docs/src/components/table-of-contents.tsx
index 085a9f6a..51d967cd 100644
--- a/apps/docs/src/components/table-of-contents.tsx
+++ b/apps/docs/src/components/table-of-contents.tsx
@@ -100,7 +100,9 @@ function updateHeadings(setter: Setter<TocItem[]>) {
 		[
 			...document
 				.getElementsByTagName("article")[0]
-				.querySelectorAll("h1, h2, h3, h4, h5, h6"),
+				.querySelectorAll(
+					"h1[data-toc], h2[data-toc], h3[data-toc], h4[data-toc], h5[data-toc], h6[data-toc]",
+				),
 		].map((element) => ({
 			depth: Number(element.tagName.substr(1)),
 			text: element.textContent!,
diff --git a/apps/docs/src/mdx-components.tsx b/apps/docs/src/mdx-components.tsx
index 47177ccf..1566c5d9 100644
--- a/apps/docs/src/mdx-components.tsx
+++ b/apps/docs/src/mdx-components.tsx
@@ -10,12 +10,27 @@ export const mdxComponents = {
 		const [local, others] = splitProps(props, ["children"]);
 
 		return (
-			<h1 {...others}>
+			<h1 data-toc="" {...others}>
 				<MetaTitle>{`${local.children} – Kobalte`}</MetaTitle>
 				{local.children}
 			</h1>
 		);
 	},
+	h2: (props: ComponentProps<"h2">) => {
+		return <h2 data-toc="" {...props} />;
+	},
+	h3: (props: ComponentProps<"h3">) => {
+		return <h3 data-toc="" {...props} />;
+	},
+	h4: (props: ComponentProps<"h4">) => {
+		return <h4 data-toc="" {...props} />;
+	},
+	h5: (props: ComponentProps<"h5">) => {
+		return <h5 data-toc="" {...props} />;
+	},
+	h6: (props: ComponentProps<"h6">) => {
+		return <h6 data-toc="" {...props} />;
+	},
 	code: (props: ComponentProps<"code">) => {
 		const [local, others] = splitProps(props, ["class"]);