docs: show sources for referenced files

docs/tutorialkit.dev/src/content/docs/reference/react-components.mdx

@@ -4,6 +4,7 @@ description: Use TutorialKit's React components for fun and profit.
 ---
 import PackageManagerTabs from '@components/Tabs/PackageManagerTabs.astro'
 import { Code } from '@astrojs/starlight/components';
+import { Tabs, TabItem } from '@astrojs/starlight/components';
 import themeCSS from '@tutorialkit/astro/default-theme.css?raw';
 
 import Example from '@components/react-examples/Example.astro';
@@ -17,6 +18,8 @@ import sourceExampleSimpleEditor from '@components/react-examples/ExampleSimpleE
 import sourceExampleFileTree from '@components/react-examples/ExampleFileTree?raw';
 import sourceExampleCodeMirrorEditor from '@components/react-examples/ExampleCodeMirrorEditor?raw';
 import sourceExampleTerminal from '@components/react-examples/ExampleTerminal?raw';
+import sourceUseTheme from "@components/react-examples/hooks/useTheme?raw";
+import sourceUseWebcontainer from "@components/react-examples/hooks/useWebcontainer?raw";
 
 You can reuse TutorialKit's React components in your own applications. They are designed to work well with the [WebContainer API][webcontainers].
 
@@ -74,6 +77,17 @@ See a full example on [StackBlitz][stackblitz-example].
 
 ## Components
 
+These examples have references to following files:
+
+<Tabs syncKey="referenced-files">
+  <TabItem label="hooks/useTheme.ts">
+    <Code code={sourceUseTheme} lang="ts" class="limit-code-height" />
+  </TabItem>
+
+  <TabItem label="hooks/useWebcontainer.ts">
+    <Code code={sourceUseWebcontainer} lang="ts" class="limit-code-height" />
+  </TabItem>
+</Tabs>
 
 ### `FileTree`