diff --git a/docs/snippets/react/document-screen-fetch-ts.mdx b/docs/snippets/react/document-screen-fetch-ts.mdx
new file mode 100644
index 000000000000..5286bf2003ee
--- /dev/null
+++ b/docs/snippets/react/document-screen-fetch-ts.mdx
@@ -0,0 +1,56 @@
+```ts
+// YourPage.tsx
+
+import React, { useState, useEffect } from 'react';
+
+import { PageLayout } from './PageLayout';
+import { DocumentHeader } from './DocumentHeader';
+import { DocumentList } from './DocumentList';
+
+// Example hook to retrieve data from an external endpoint
+function useFetchData() {
+  const [status, setStatus] = useState<string>('idle');
+  const [data, setData] = useState<any[]>([]);
+  useEffect(() => {
+    setStatus('loading');
+    fetch('https://your-restful-endpoint')
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(res.statusText);
+        }
+        return res;
+      })
+      .then((res) => res.json())
+      .then((data) => {
+        setStatus('success');
+        setData(data);
+      })
+      .catch(() => {
+        setStatus('error');
+      });
+  }, []);
+
+  return {
+    status,
+    data,
+  };
+}
+
+export function DocumentScreen() {
+  const { status, data } = useFetchData();
+
+  const { user, document, subdocuments } = data;
+
+  if (status === 'loading') {
+    return <p>Loading...</p>;
+  }
+  if (status === 'error') {
+    return <p>There was an error fetching the data!</p>;
+  }
+  return (
+    <PageLayout user={user}>
+      <DocumentHeader document={document} />
+      <DocumentList documents={subdocuments} />
+    </PageLayout>
+  );
+}
\ No newline at end of file
diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index 4307a31020f4..bb62b2d26c27 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -141,6 +141,7 @@ If you're working with pure presentational screens, adding stories through [args
 <CodeSnippets
   paths={[
     'react/document-screen-fetch.js.mdx',
+    'react/document-screen-fetch.ts.mdx',
     'vue/document-screen-fetch.3.js.mdx',
     'vue/document-screen-fetch.3.ts.mdx',
     'angular/document-screen-fetch.ts.mdx',