diff --git a/docs/astro.config.ts b/docs/astro.config.ts
index 63ba80a..6a112b4 100644
--- a/docs/astro.config.ts
+++ b/docs/astro.config.ts
@@ -57,7 +57,6 @@ export default defineConfig({
           keepBackground: true,
           theme: moonlightTheme,
           transformers: [
-            transformerTwoslash({ renderer: rendererRich() }),
             transformerCopyButton({
               visibility: 'always',
               feedbackDuration: 2_500,
@@ -101,6 +100,10 @@ export default defineConfig({
             collapsed: false,
           },
         },
+        {
+          label: 'Examples',
+          link: '/examples',
+        },
       ],
     }),
     tailwind({ applyBaseStyles: false }),
diff --git a/docs/src/content/docs/examples.mdx b/docs/src/content/docs/examples.mdx
new file mode 100644
index 0000000..0e763de
--- /dev/null
+++ b/docs/src/content/docs/examples.mdx
@@ -0,0 +1,11 @@
+---
+title: Examples
+description: rehype-pretty-code examples
+---
+import { LinkCard, CardGrid } from '@astrojs/starlight/components';
+
+<LinkCard title="Next.js" href="https://github.com/rehype-pretty/rehype-pretty-code/tree/master/examples/next" />
+<LinkCard title="Astro" href="https://github.com/rehype-pretty/rehype-pretty-code/tree/master/examples/astro" />
+<LinkCard title="Astro Starlight" href="https://github.com/rehype-pretty/rehype-pretty-code/tree/master/docs" />
+<LinkCard title="Svelte" href="https://github.com/rehype-pretty/rehype-pretty-code/tree/master/examples/sveltekit" />
+<LinkCard title="HTML - CDN" href="https://github.com/rehype-pretty/rehype-pretty-code/tree/master/examples/cdn" />