diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index a9ac2e136..70e5ae5b0 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -59,7 +59,7 @@ export function Breadcrumbs({
                 <DropdownItem key={`breadcrumb-toc-${heading.id}`} asChild>
                   <Link
                     to="."
-                    hash={`#${heading.id}`}
+                    hash={heading.id}
                     style={{
                       paddingLeft: `${(heading.level - 2) * 0.5 + 0.5}rem`,
                     }}
diff --git a/src/components/CodeExampleCard.tsx b/src/components/CodeExampleCard.tsx
index ae5e251f5..4ca1bbee9 100644
--- a/src/components/CodeExampleCard.tsx
+++ b/src/components/CodeExampleCard.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Card } from '~/components/Card'
-import { CodeBlock } from '~/components/CodeBlock'
+import { CodeBlock } from '~/components/markdown'
 import { FrameworkIconTabs } from '~/components/FrameworkIconTabs'
 import type { Framework } from '~/libraries'
 
diff --git a/src/components/CodeExplorer.tsx b/src/components/CodeExplorer.tsx
index 8c25781b3..9bf364fa8 100644
--- a/src/components/CodeExplorer.tsx
+++ b/src/components/CodeExplorer.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { CodeBlock } from '~/components/CodeBlock'
+import { CodeBlock } from '~/components/markdown'
 import { FileExplorer } from './FileExplorer'
 import { InteractiveSandbox } from './InteractiveSandbox'
 import { CodeExplorerTopBar } from './CodeExplorerTopBar'
diff --git a/src/components/Doc.tsx b/src/components/Doc.tsx
index c9b8c5868..76d6c94ce 100644
--- a/src/components/Doc.tsx
+++ b/src/components/Doc.tsx
@@ -7,7 +7,7 @@ import { GamHeader } from './Gam'
 import { Toc } from './Toc'
 import { renderMarkdown } from '~/utils/markdown'
 import { DocBreadcrumb } from './DocBreadcrumb'
-import { MarkdownContent } from './MarkdownContent'
+import { MarkdownContent } from '~/components/markdown'
 import type { ConfigSchema } from '~/utils/config'
 
 type DocProps = {
diff --git a/src/components/FeedEntry.tsx b/src/components/FeedEntry.tsx
index 382bf8aea..1e23dcc5a 100644
--- a/src/components/FeedEntry.tsx
+++ b/src/components/FeedEntry.tsx
@@ -1,5 +1,5 @@
 import { format, formatDistanceToNow } from '~/utils/dates'
-import { Markdown } from '~/components/Markdown'
+import { Markdown } from '~/components/markdown'
 import { libraries } from '~/libraries'
 import { partners } from '~/utils/partners'
 import { twMerge } from 'tailwind-merge'
diff --git a/src/components/FeedEntryTimeline.tsx b/src/components/FeedEntryTimeline.tsx
index cff0f1652..67ddb2b89 100644
--- a/src/components/FeedEntryTimeline.tsx
+++ b/src/components/FeedEntryTimeline.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { format, formatDistanceToNow } from '~/utils/dates'
-import { Markdown } from '~/components/Markdown'
+import { Markdown } from '~/components/markdown'
 import { Card } from '~/components/Card'
 import { libraries } from '~/libraries'
 import { partners } from '~/utils/partners'
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
deleted file mode 100644
index cb1afd20e..000000000
--- a/src/components/Markdown.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-import * as React from 'react'
-import { MarkdownLink } from '~/components/MarkdownLink'
-import type { HTMLProps } from 'react'
-
-import parse, {
-  attributesToProps,
-  domToReact,
-  Element,
-  HTMLReactParserOptions,
-} from 'html-react-parser'
-
-import { renderMarkdown } from '~/utils/markdown'
-import { getNetlifyImageUrl } from '~/utils/netlifyImage'
-import { Tabs } from '~/components/Tabs'
-import { CodeBlock } from './CodeBlock'
-import { PackageManagerTabs } from './PackageManagerTabs'
-import type { Framework } from '~/libraries/types'
-import { FileTabs } from './FileTabs'
-import { FrameworkCodeBlock } from './FrameworkCodeBlock'
-
-type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-
-const CustomHeading = ({
-  Comp,
-  id,
-  children,
-  ...props
-}: HTMLProps<HTMLHeadingElement> & {
-  Comp: HeadingLevel
-}) => {
-  // Convert children to array and strip any inner anchor (native 'a' or MarkdownLink)
-  const childrenArray = React.Children.toArray(children)
-  const sanitizedChildren = childrenArray.map((child) => {
-    if (
-      React.isValidElement(child) &&
-      (child.type === 'a' || child.type === MarkdownLink)
-    ) {
-      // replace anchor child with its own children so outer anchor remains the only link
-      return (child.props as { children?: React.ReactNode }).children ?? null
-    }
-    return child
-  })
-
-  const heading = (
-    <Comp id={id} {...props}>
-      {sanitizedChildren}
-    </Comp>
-  )
-
-  if (id) {
-    return (
-      <a
-        href={`#${id}`}
-        className={`anchor-heading *:scroll-my-20 *:lg:scroll-my-4`}
-      >
-        {heading}
-      </a>
-    )
-  }
-
-  return heading
-}
-
-const makeHeading =
-  (type: HeadingLevel) => (props: HTMLProps<HTMLHeadingElement>) => (
-    <CustomHeading
-      Comp={type}
-      {...props}
-      className={`${props.className ?? ''} block`}
-    />
-  )
-
-const markdownComponents: Record<string, React.FC> = {
-  a: MarkdownLink,
-  pre: CodeBlock,
-  h1: makeHeading('h1'),
-  h2: makeHeading('h2'),
-  h3: makeHeading('h3'),
-  h4: makeHeading('h4'),
-  h5: makeHeading('h5'),
-  h6: makeHeading('h6'),
-  code: function Code({ className, ...rest }: HTMLProps<HTMLElement>) {
-    return (
-      <span
-        className={`border border-gray-500/20 bg-gray-500/10 rounded px-1 py-0.5${
-          className ? ` ${className}` : ''
-        }`}
-        {...rest}
-      />
-    )
-  },
-  iframe: (props) => (
-    <iframe {...props} className="w-full" title="Embedded Content" />
-  ),
-  img: ({
-    alt,
-    src,
-    className,
-    children: _,
-    ...props
-  }: HTMLProps<HTMLImageElement>) => (
-    <img
-      {...props}
-      src={src ? getNetlifyImageUrl(src) : undefined}
-      alt={alt ?? ''}
-      className={`max-w-full h-auto rounded-lg shadow-md ${className ?? ''}`}
-      loading="lazy"
-      decoding="async"
-    />
-  ),
-}
-
-const options: HTMLReactParserOptions = {
-  replace: (domNode) => {
-    if (domNode instanceof Element && domNode.attribs) {
-      if (domNode.name === 'md-comment-component') {
-        const componentName = domNode.attribs['data-component']
-        const rawAttributes = domNode.attribs['data-attributes']
-        const pmMeta = domNode.attribs['data-package-manager-meta']
-        const attributes: Record<string, any> = {}
-        try {
-          Object.assign(attributes, JSON.parse(rawAttributes))
-        } catch {
-          // ignore JSON parse errors and fall back to empty props
-        }
-
-        switch (componentName?.toLowerCase()) {
-          case 'tabs': {
-            if (pmMeta) {
-              try {
-                const { packagesByFramework, mode } = JSON.parse(pmMeta)
-                const id =
-                  attributes.id ||
-                  `package-manager-tabs-${Math.random().toString(36).slice(2, 9)}`
-                const frameworks = Object.keys(
-                  packagesByFramework,
-                ) as Framework[]
-
-                return (
-                  <PackageManagerTabs
-                    id={id}
-                    packagesByFramework={packagesByFramework}
-                    mode={mode}
-                    frameworks={frameworks}
-                  />
-                )
-              } catch {
-                // Fall through to default tabs if parsing fails
-              }
-            }
-
-            // Check if this is files variant
-            const filesMeta = domNode.attribs['data-files-meta']
-            if (filesMeta) {
-              try {
-                const tabs = attributes.tabs || []
-                const id =
-                  attributes.id ||
-                  `files-tabs-${Math.random().toString(36).slice(2, 9)}`
-
-                const panelElements = domNode.children?.filter(
-                  (child): child is Element =>
-                    child instanceof Element && child.name === 'md-tab-panel',
-                )
-
-                const children = panelElements?.map((panel) =>
-                  domToReact(panel.children as any, options),
-                )
-
-                return (
-                  <FileTabs id={id} tabs={tabs} children={children as any} />
-                )
-              } catch {
-                // Fall through to default tabs if parsing fails
-              }
-            }
-
-            const frameworkMeta = domNode.attribs['data-framework-meta']
-            if (frameworkMeta) {
-              try {
-                const { codeBlocksByFramework } = JSON.parse(frameworkMeta)
-                const availableFrameworks = JSON.parse(
-                  domNode.attribs['data-available-frameworks'] || '[]',
-                )
-                const id =
-                  attributes.id ||
-                  `framework-${Math.random().toString(36).slice(2, 9)}`
-
-                const panelElements = domNode.children?.filter(
-                  (child): child is Element =>
-                    child instanceof Element && child.name === 'md-tab-panel',
-                )
-
-                // Build panelsByFramework map
-                const panelsByFramework: Record<string, React.ReactNode> = {}
-                panelElements?.forEach((panel) => {
-                  const fw = panel.attribs['data-framework']
-                  if (fw) {
-                    panelsByFramework[fw] = domToReact(
-                      panel.children as any,
-                      options,
-                    )
-                  }
-                })
-
-                return (
-                  <FrameworkCodeBlock
-                    id={id}
-                    codeBlocksByFramework={codeBlocksByFramework}
-                    availableFrameworks={availableFrameworks}
-                    panelsByFramework={panelsByFramework}
-                  />
-                )
-              } catch {
-                // Fall through to default tabs if parsing fails
-              }
-            }
-
-            const tabs = attributes.tabs
-            const id =
-              attributes.id || `tabs-${Math.random().toString(36).slice(2, 9)}`
-
-            if (!tabs || !Array.isArray(tabs)) {
-              return null
-            }
-
-            const panelElements = domNode.children?.filter(
-              (child): child is Element =>
-                child instanceof Element && child.name === 'md-tab-panel',
-            )
-
-            const children = panelElements?.map((panel) => {
-              const result = domToReact(panel.children as any, options)
-              // Wrap in fragment to ensure it's a single React node
-              return <>{result}</>
-            })
-
-            return <Tabs id={id} tabs={tabs} children={children as any} />
-          }
-          default:
-            return <div>{domToReact(domNode.children as any, options)}</div>
-        }
-      }
-
-      const replacer = markdownComponents[domNode.name]
-      if (replacer) {
-        return React.createElement(
-          replacer,
-          attributesToProps(domNode.attribs),
-          domToReact(domNode.children as any, options),
-        )
-      }
-    }
-
-    return
-  },
-}
-
-type MarkdownProps = {
-  rawContent?: string
-  htmlMarkup?: string
-}
-
-export function Markdown({ rawContent, htmlMarkup }: MarkdownProps) {
-  const rendered = React.useMemo(() => {
-    if (rawContent) {
-      return renderMarkdown(rawContent)
-    }
-
-    if (htmlMarkup) {
-      return { markup: htmlMarkup, headings: [] }
-    }
-
-    return { markup: '', headings: [] }
-  }, [rawContent, htmlMarkup])
-
-  return React.useMemo(() => {
-    if (!rendered.markup) {
-      return null
-    }
-
-    return parse(rendered.markup, options)
-  }, [rendered.markup])
-}
diff --git a/src/components/SimpleMarkdown.tsx b/src/components/SimpleMarkdown.tsx
index c49418aed..3a3e019ac 100644
--- a/src/components/SimpleMarkdown.tsx
+++ b/src/components/SimpleMarkdown.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { MarkdownLink } from '~/components/MarkdownLink'
+import { MarkdownLink } from '~/components/markdown'
 import type { HTMLProps } from 'react'
 import parse, {
   attributesToProps,
diff --git a/src/components/Toc.tsx b/src/components/Toc.tsx
index f61ab193a..b4c4f84ce 100644
--- a/src/components/Toc.tsx
+++ b/src/components/Toc.tsx
@@ -20,13 +20,7 @@ type TocProps = {
   activeHeadings: Array<string>
 }
 
-export function Toc({
-  headings,
-  colorFrom,
-  colorTo,
-  textColor,
-  activeHeadings,
-}: TocProps) {
+export function Toc({ headings, textColor, activeHeadings }: TocProps) {
   return (
     <nav className="flex flex-col sticky top-[var(--navbar-height)] max-h-[calc(100dvh-var(--navbar-height))] overflow-hidden">
       <div className="py-1">
@@ -47,7 +41,7 @@ export function Toc({
             <Link
               to="."
               title={heading.id}
-              hash={`#${heading.id}`}
+              hash={heading.id}
               aria-current={activeHeadings.includes(heading.id) && 'location'}
               className={twMerge(
                 'block py-1 pl-2 border-l-2 rounded-r transition-colors duration-200 opacity-60 hover:opacity-100 hover:bg-gray-500/10',
diff --git a/src/components/admin/FeedEntryEditor.tsx b/src/components/admin/FeedEntryEditor.tsx
index 3cc28b1c2..c43cddc2e 100644
--- a/src/components/admin/FeedEntryEditor.tsx
+++ b/src/components/admin/FeedEntryEditor.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { FeedEntry } from '~/components/FeedEntry'
-import { Markdown } from '~/components/Markdown'
+import { Markdown } from '~/components/markdown'
 import { libraries } from '~/libraries'
 import { partners } from '~/utils/partners'
 import { currentUserQueryOptions } from '~/queries/auth'
diff --git a/src/components/CodeBlock.tsx b/src/components/markdown/CodeBlock.tsx
similarity index 94%
rename from src/components/CodeBlock.tsx
rename to src/components/markdown/CodeBlock.tsx
index ca069dc55..67f1ff8bb 100644
--- a/src/components/CodeBlock.tsx
+++ b/src/components/markdown/CodeBlock.tsx
@@ -5,7 +5,7 @@ import { Copy } from 'lucide-react'
 import type { Mermaid } from 'mermaid'
 import { transformerNotationDiff } from '@shikijs/transformers'
 import { createHighlighter, type HighlighterGeneric } from 'shiki'
-import { Button } from './Button'
+import { Button } from '../Button'
 
 // Language aliases mapping
 const LANG_ALIASES: Record<string, string> = {
@@ -148,10 +148,12 @@ export function CodeBlock({
         normalizedLang === 'mermaid' ? 'plaintext' : normalizedLang
 
       const highlighter = await getHighlighter(langStr)
+      // Trim trailing newlines to prevent empty lines at end of code block
+      const trimmedCode = (code || '').trimEnd()
 
       const htmls = await Promise.all(
         themes.map(async (theme) => {
-          const output = highlighter.codeToHtml(code || '', {
+          const output = highlighter.codeToHtml(trimmedCode, {
             lang: effectiveLang,
             theme,
             transformers: [transformerNotationDiff()],
@@ -159,11 +161,11 @@ export function CodeBlock({
 
           if (lang === 'mermaid') {
             const preAttributes = extractPreAttributes(output)
-            let svgHtml = genSvgMap.get(code || '')
+            let svgHtml = genSvgMap.get(trimmedCode)
             if (!svgHtml) {
               const mermaid = await getMermaid()
-              const { svg } = await mermaid.render('foo', code || '')
-              genSvgMap.set(code || '', svg)
+              const { svg } = await mermaid.render('foo', trimmedCode)
+              genSvgMap.set(trimmedCode, svg)
               svgHtml = svg
             }
             return `<div class='${preAttributes.class} py-4 bg-neutral-50'>${svgHtml}</div>`
diff --git a/src/components/FileTabs.tsx b/src/components/markdown/FileTabs.tsx
similarity index 100%
rename from src/components/FileTabs.tsx
rename to src/components/markdown/FileTabs.tsx
diff --git a/src/components/FrameworkCodeBlock.tsx b/src/components/markdown/FrameworkContent.tsx
similarity index 76%
rename from src/components/FrameworkCodeBlock.tsx
rename to src/components/markdown/FrameworkContent.tsx
index d00e119ef..d2bd094d5 100644
--- a/src/components/FrameworkCodeBlock.tsx
+++ b/src/components/markdown/FrameworkContent.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react'
-import { useLocalCurrentFramework } from './FrameworkSelect'
+import { useLocalCurrentFramework } from '../FrameworkSelect'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { useParams } from '@tanstack/react-router'
 import { Tabs } from './Tabs'
 import type { Framework } from '~/libraries/types'
+import { Children, ReactNode } from 'react'
 
 type CodeBlockMeta = {
   title: string
@@ -11,26 +11,26 @@ type CodeBlockMeta = {
   language: string
 }
 
-type FrameworkCodeBlockProps = {
+type FrameworkContentProps = {
   id: string
   codeBlocksByFramework: Record<string, CodeBlockMeta[]>
   availableFrameworks: string[]
   /** Pre-rendered React children for each framework (from domToReact) */
-  panelsByFramework: Record<string, React.ReactNode>
+  panelsByFramework: Record<string, ReactNode>
 }
 
 /**
- * Renders code blocks for the currently selected framework.
- * - If no blocks for framework: shows nothing
+ * Renders content for the currently selected framework.
+ * - If no content for framework: shows nothing
  * - If 1 code block: shows just the code block (minimal style)
  * - If multiple code blocks: shows as file tabs
  * - If no code blocks but has content: shows the content directly
  */
-export function FrameworkCodeBlock({
+export function FrameworkContent({
   id,
   codeBlocksByFramework,
   panelsByFramework,
-}: FrameworkCodeBlockProps) {
+}: FrameworkContentProps) {
   const { framework: paramsFramework } = useParams({ strict: false })
   const localCurrentFramework = useLocalCurrentFramework()
   const userQuery = useCurrentUserQuery()
@@ -54,12 +54,12 @@ export function FrameworkCodeBlock({
 
   // If no code blocks, just render the content directly
   if (frameworkBlocks.length === 0) {
-    return <div className="framework-code-block">{frameworkPanel}</div>
+    return <div className="framework-content">{frameworkPanel}</div>
   }
 
   // If 1 code block, render minimal style
   if (frameworkBlocks.length === 1) {
-    return <div className="framework-code-block">{frameworkPanel}</div>
+    return <div className="framework-content">{frameworkPanel}</div>
   }
 
   // Multiple code blocks - show as file tabs
@@ -68,10 +68,10 @@ export function FrameworkCodeBlock({
     name: block.title || 'Untitled',
   }))
 
-  const childrenArray = React.Children.toArray(frameworkPanel)
+  const childrenArray = Children.toArray(frameworkPanel)
 
   return (
-    <div className="framework-code-block">
+    <div className="framework-content">
       <Tabs id={`${id}-${normalizedFramework}`} tabs={tabs} variant="files">
         {childrenArray}
       </Tabs>
diff --git a/src/components/markdown/Markdown.tsx b/src/components/markdown/Markdown.tsx
new file mode 100644
index 000000000..580b4b197
--- /dev/null
+++ b/src/components/markdown/Markdown.tsx
@@ -0,0 +1,190 @@
+import * as React from 'react'
+import { MarkdownLink } from './MarkdownLink'
+import type { HTMLProps } from 'react'
+
+import parse, {
+  attributesToProps,
+  domToReact,
+  Element,
+  HTMLReactParserOptions,
+} from 'html-react-parser'
+
+import { renderMarkdown } from '~/utils/markdown'
+import { getNetlifyImageUrl } from '~/utils/netlifyImage'
+import { CodeBlock } from './CodeBlock'
+import { handleTabsComponent } from './MarkdownTabsHandler'
+import { handleFrameworkComponent } from './MarkdownFrameworkHandler'
+
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+const CustomHeading = ({
+  Comp,
+  id,
+  children,
+  ...props
+}: HTMLProps<HTMLHeadingElement> & {
+  Comp: HeadingLevel
+}) => {
+  // Convert children to array and strip any inner anchor (native 'a' or MarkdownLink)
+  const childrenArray = React.Children.toArray(children)
+  const sanitizedChildren = childrenArray.map((child) => {
+    if (
+      React.isValidElement(child) &&
+      (child.type === 'a' || child.type === MarkdownLink)
+    ) {
+      // replace anchor child with its own children so outer anchor remains the only link
+      return (child.props as { children?: React.ReactNode }).children ?? null
+    }
+    return child
+  })
+
+  const heading = (
+    <Comp id={id} {...props}>
+      {sanitizedChildren}
+    </Comp>
+  )
+
+  if (id) {
+    return (
+      <a
+        href={`#${id}`}
+        className={`anchor-heading *:scroll-my-20 *:lg:scroll-my-4`}
+      >
+        {heading}
+      </a>
+    )
+  }
+
+  return heading
+}
+
+const makeHeading =
+  (type: HeadingLevel) => (props: HTMLProps<HTMLHeadingElement>) => (
+    <CustomHeading
+      Comp={type}
+      {...props}
+      className={`${props.className ?? ''} block`}
+    />
+  )
+
+const InlineCode = React.memo(function InlineCode({
+  className,
+  ...rest
+}: HTMLProps<HTMLElement>) {
+  return (
+    <span
+      className={`border border-gray-500/20 bg-gray-500/10 rounded px-1 py-0.5${
+        className ? ` ${className}` : ''
+      }`}
+      {...rest}
+    />
+  )
+})
+
+const MarkdownImage = React.memo(function MarkdownImage({
+  alt,
+  src,
+  className,
+  children: _,
+  ...props
+}: HTMLProps<HTMLImageElement>) {
+  return (
+    <img
+      {...props}
+      src={src ? getNetlifyImageUrl(src) : undefined}
+      alt={alt ?? ''}
+      className={`max-w-full h-auto rounded-lg shadow-md ${className ?? ''}`}
+      loading="lazy"
+      decoding="async"
+    />
+  )
+})
+
+const MarkdownIframe = React.memo(function MarkdownIframe(
+  props: HTMLProps<HTMLIFrameElement>,
+) {
+  return <iframe {...props} className="w-full" title="Embedded Content" />
+})
+
+const markdownComponents: Record<string, React.FC> = {
+  a: MarkdownLink,
+  pre: CodeBlock,
+  h1: makeHeading('h1'),
+  h2: makeHeading('h2'),
+  h3: makeHeading('h3'),
+  h4: makeHeading('h4'),
+  h5: makeHeading('h5'),
+  h6: makeHeading('h6'),
+  code: InlineCode,
+  iframe: MarkdownIframe,
+  img: MarkdownImage,
+}
+
+const options: HTMLReactParserOptions = {
+  replace: (domNode) => {
+    if (domNode instanceof Element && domNode.attribs) {
+      if (domNode.name === 'md-comment-component') {
+        const componentName = domNode.attribs['data-component']
+        const rawAttributes = domNode.attribs['data-attributes']
+        const attributes: Record<string, any> = {}
+        try {
+          Object.assign(attributes, JSON.parse(rawAttributes))
+        } catch {
+          // ignore JSON parse errors and fall back to empty props
+        }
+
+        switch (componentName?.toLowerCase()) {
+          case 'tabs':
+            return handleTabsComponent(domNode, attributes, options)
+          case 'framework':
+            return handleFrameworkComponent(domNode, attributes, options)
+          default:
+            return <div>{domToReact(domNode.children as any, options)}</div>
+        }
+      }
+
+      const replacer = markdownComponents[domNode.name]
+      if (replacer) {
+        return React.createElement(
+          replacer,
+          attributesToProps(domNode.attribs),
+          domToReact(domNode.children as any, options),
+        )
+      }
+    }
+
+    return
+  },
+}
+
+type MarkdownProps = {
+  rawContent?: string
+  htmlMarkup?: string
+}
+
+export const Markdown = React.memo(function Markdown({
+  rawContent,
+  htmlMarkup,
+}: MarkdownProps) {
+  const rendered = React.useMemo(() => {
+    if (rawContent) {
+      return renderMarkdown(rawContent)
+    }
+
+    if (htmlMarkup) {
+      return { markup: htmlMarkup, headings: [] }
+    }
+
+    return { markup: '', headings: [] }
+  }, [rawContent, htmlMarkup])
+
+  const parsed = React.useMemo(() => {
+    if (!rendered.markup) {
+      return null
+    }
+
+    return parse(rendered.markup, options)
+  }, [rendered.markup])
+
+  return parsed
+})
diff --git a/src/components/MarkdownContent.tsx b/src/components/markdown/MarkdownContent.tsx
similarity index 92%
rename from src/components/MarkdownContent.tsx
rename to src/components/markdown/MarkdownContent.tsx
index 386a216da..7567b046f 100644
--- a/src/components/MarkdownContent.tsx
+++ b/src/components/markdown/MarkdownContent.tsx
@@ -2,10 +2,10 @@ import * as React from 'react'
 import { SquarePen } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { DocTitle } from '~/components/DocTitle'
-import { Markdown } from '~/components/Markdown'
-import { CopyPageDropdown } from './CopyPageDropdown'
-import { DocFeedbackProvider } from './DocFeedbackProvider'
-import { Button } from './Button'
+import { Markdown } from './Markdown'
+import { CopyPageDropdown } from '~/components/CopyPageDropdown'
+import { DocFeedbackProvider } from '~/components/DocFeedbackProvider'
+import { Button } from '~/components/Button'
 
 type MarkdownContentProps = {
   title: string
diff --git a/src/components/markdown/MarkdownFrameworkHandler.tsx b/src/components/markdown/MarkdownFrameworkHandler.tsx
new file mode 100644
index 000000000..27b6e4ac5
--- /dev/null
+++ b/src/components/markdown/MarkdownFrameworkHandler.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react'
+import { domToReact, Element } from 'html-react-parser'
+import type { HTMLReactParserOptions } from 'html-react-parser'
+
+// Helper to resolve different module shapes (named export vs default)
+function resolveModuleDefault(mod: any, key: string): React.ComponentType<any> {
+  if (!mod) return undefined as any
+  if (mod[key] && typeof mod[key] === 'function') return mod[key]
+  if (mod.default) {
+    if (mod.default[key] && typeof mod.default[key] === 'function')
+      return mod.default[key]
+    if (typeof mod.default === 'function') return mod.default
+  }
+  if (typeof mod === 'function') return mod
+  return (mod as any).default ?? (mod as any)
+}
+
+const FrameworkContent = React.lazy<React.ComponentType<any>>(() =>
+  import('./FrameworkContent').then((mod) => ({
+    default: resolveModuleDefault(mod, 'FrameworkContent'),
+  })),
+)
+
+export function handleFrameworkComponent(
+  domNode: Element,
+  attributes: Record<string, any>,
+  options: HTMLReactParserOptions,
+) {
+  const frameworkMeta = domNode.attribs['data-framework-meta']
+  if (!frameworkMeta) {
+    return null
+  }
+
+  try {
+    const { codeBlocksByFramework } = JSON.parse(frameworkMeta)
+    const availableFrameworks = JSON.parse(
+      domNode.attribs['data-available-frameworks'] || '[]',
+    )
+    const id =
+      attributes.id || `framework-${Math.random().toString(36).slice(2, 9)}`
+
+    const panelElements = domNode.children?.filter(
+      (child): child is Element =>
+        child instanceof Element && child.name === 'md-framework-panel',
+    )
+
+    // Build panelsByFramework map
+    const panelsByFramework: Record<string, React.ReactNode> = {}
+    panelElements?.forEach((panel) => {
+      const fw = panel.attribs['data-framework']
+      if (fw) {
+        panelsByFramework[fw] = domToReact(panel.children as any, options)
+      }
+    })
+
+    return (
+      <React.Suspense fallback={<div>Loading...</div>}>
+        <FrameworkContent
+          id={id}
+          codeBlocksByFramework={codeBlocksByFramework}
+          availableFrameworks={availableFrameworks}
+          panelsByFramework={panelsByFramework}
+        />
+      </React.Suspense>
+    )
+  } catch {
+    return null
+  }
+}
diff --git a/src/components/MarkdownHeadingContext.tsx b/src/components/markdown/MarkdownHeadingContext.tsx
similarity index 100%
rename from src/components/MarkdownHeadingContext.tsx
rename to src/components/markdown/MarkdownHeadingContext.tsx
diff --git a/src/components/MarkdownLink.tsx b/src/components/markdown/MarkdownLink.tsx
similarity index 100%
rename from src/components/MarkdownLink.tsx
rename to src/components/markdown/MarkdownLink.tsx
diff --git a/src/components/markdown/MarkdownTabsHandler.tsx b/src/components/markdown/MarkdownTabsHandler.tsx
new file mode 100644
index 000000000..4774516a8
--- /dev/null
+++ b/src/components/markdown/MarkdownTabsHandler.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react'
+import { domToReact, Element } from 'html-react-parser'
+import type { HTMLReactParserOptions } from 'html-react-parser'
+import type { Framework } from '~/libraries/types'
+
+// Helper to resolve different module shapes (named export vs default)
+function resolveModuleDefault(mod: any, key: string): React.ComponentType<any> {
+  if (!mod) return undefined as any
+  if (mod[key] && typeof mod[key] === 'function') return mod[key]
+  if (mod.default) {
+    if (mod.default[key] && typeof mod.default[key] === 'function')
+      return mod.default[key]
+    if (typeof mod.default === 'function') return mod.default
+  }
+  if (typeof mod === 'function') return mod
+  return (mod as any).default ?? (mod as any)
+}
+
+const Tabs = React.lazy<React.ComponentType<any>>(() =>
+  import('./Tabs').then((mod) => ({
+    default: resolveModuleDefault(mod, 'Tabs'),
+  })),
+)
+const PackageManagerTabs = React.lazy<React.ComponentType<any>>(() =>
+  import('./PackageManagerTabs').then((mod) => ({
+    default: resolveModuleDefault(mod, 'PackageManagerTabs'),
+  })),
+)
+const FileTabs = React.lazy<React.ComponentType<any>>(() =>
+  import('./FileTabs').then((mod) => ({
+    default: resolveModuleDefault(mod, 'FileTabs'),
+  })),
+)
+
+export function handleTabsComponent(
+  domNode: Element,
+  attributes: Record<string, any>,
+  options: HTMLReactParserOptions,
+) {
+  const pmMeta = domNode.attribs['data-package-manager-meta']
+
+  // Handle package-manager variant
+  if (pmMeta) {
+    try {
+      const { packagesByFramework, mode } = JSON.parse(pmMeta)
+      const id =
+        attributes.id ||
+        `package-manager-tabs-${Math.random().toString(36).slice(2, 9)}`
+      const frameworks = Object.keys(packagesByFramework) as Framework[]
+
+      return (
+        <React.Suspense fallback={<div>Loading...</div>}>
+          <PackageManagerTabs
+            id={id}
+            packagesByFramework={packagesByFramework}
+            mode={mode}
+            frameworks={frameworks}
+          />
+        </React.Suspense>
+      )
+    } catch {
+      // Fall through to default tabs if parsing fails
+    }
+  }
+
+  // Check if this is files variant
+  const filesMeta = domNode.attribs['data-files-meta']
+  if (filesMeta) {
+    try {
+      const tabs = attributes.tabs || []
+      const id =
+        attributes.id || `files-tabs-${Math.random().toString(36).slice(2, 9)}`
+
+      const panelElements = domNode.children?.filter(
+        (child): child is Element =>
+          child instanceof Element && child.name === 'md-tab-panel',
+      )
+
+      const children = panelElements?.map((panel) =>
+        domToReact(panel.children as any, options),
+      )
+
+      return (
+        <React.Suspense fallback={<div>Loading...</div>}>
+          <FileTabs id={id} tabs={tabs} children={children as any} />
+        </React.Suspense>
+      )
+    } catch {
+      // Fall through to default tabs if parsing fails
+    }
+  }
+
+  // Handle default tabs variant
+  const tabs = attributes.tabs
+  const id = attributes.id || `tabs-${Math.random().toString(36).slice(2, 9)}`
+
+  if (!tabs || !Array.isArray(tabs)) {
+    return null
+  }
+
+  const panelElements = domNode.children?.filter(
+    (child): child is Element =>
+      child instanceof Element && child.name === 'md-tab-panel',
+  )
+
+  const children = panelElements?.map((panel) => {
+    const result = domToReact(panel.children as any, options)
+    // Wrap in fragment to ensure it's a single React node
+    return <>{result}</>
+  })
+
+  return (
+    <React.Suspense fallback={<div>Loading...</div>}>
+      <Tabs id={id} tabs={tabs} children={children as any} />
+    </React.Suspense>
+  )
+}
diff --git a/src/components/PackageManagerTabs.tsx b/src/components/markdown/PackageManagerTabs.tsx
similarity index 98%
rename from src/components/PackageManagerTabs.tsx
rename to src/components/markdown/PackageManagerTabs.tsx
index c6b75600a..77c52fb5e 100644
--- a/src/components/PackageManagerTabs.tsx
+++ b/src/components/markdown/PackageManagerTabs.tsx
@@ -1,4 +1,4 @@
-import { useLocalCurrentFramework } from './FrameworkSelect'
+import { useLocalCurrentFramework } from '../FrameworkSelect'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { useParams } from '@tanstack/react-router'
 import { create } from 'zustand'
diff --git a/src/components/Tabs.tsx b/src/components/markdown/Tabs.tsx
similarity index 99%
rename from src/components/Tabs.tsx
rename to src/components/markdown/Tabs.tsx
index 7a2ff7c54..701709a0a 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/markdown/Tabs.tsx
@@ -14,6 +14,7 @@ export type TabsProps = {
   id: string
   activeSlug?: string
   onTabChange?: (slug: string) => void
+  variant?: string
 }
 
 export function Tabs({
diff --git a/src/components/markdown/index.ts b/src/components/markdown/index.ts
new file mode 100644
index 000000000..f4b3dc588
--- /dev/null
+++ b/src/components/markdown/index.ts
@@ -0,0 +1,12 @@
+export { Markdown } from './Markdown'
+export { MarkdownLink } from './MarkdownLink'
+export { MarkdownContent } from './MarkdownContent'
+export {
+  MarkdownHeadingProvider,
+  useMarkdownHeadings,
+} from './MarkdownHeadingContext'
+export { CodeBlock } from './CodeBlock'
+export { Tabs } from './Tabs'
+export { FileTabs } from './FileTabs'
+export { PackageManagerTabs } from './PackageManagerTabs'
+export { FrameworkContent } from './FrameworkContent'
diff --git a/src/routes/_libraries/account/api-keys.tsx b/src/routes/_libraries/account/api-keys.tsx
index e0c9539bf..fe4997b22 100644
--- a/src/routes/_libraries/account/api-keys.tsx
+++ b/src/routes/_libraries/account/api-keys.tsx
@@ -10,7 +10,7 @@ import {
 import { useToast } from '~/components/ToastProvider'
 import { Card } from '~/components/Card'
 import { Button } from '~/components/Button'
-import { CodeBlock } from '~/components/CodeBlock'
+import { CodeBlock } from '~/components/markdown'
 import {
   Key,
   Plus,
diff --git a/src/routes/_libraries/blog.$.tsx b/src/routes/_libraries/blog.$.tsx
index 8a8041495..06b783fd3 100644
--- a/src/routes/_libraries/blog.$.tsx
+++ b/src/routes/_libraries/blog.$.tsx
@@ -1,4 +1,4 @@
-import { notFound, createFileRoute, redirect } from '@tanstack/react-router'
+import { createFileRoute, notFound, redirect } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
 import { PostNotFound } from './blog'
 import { createServerFn } from '@tanstack/react-start'
@@ -8,7 +8,7 @@ import * as v from 'valibot'
 import { setResponseHeaders } from '@tanstack/react-start/server'
 import { allPosts } from 'content-collections'
 import * as React from 'react'
-import { MarkdownContent } from '~/components/MarkdownContent'
+import { MarkdownContent } from '~/components/markdown'
 import { GamHeader } from '~/components/Gam'
 import { AdGate } from '~/contexts/AdsContext'
 import { Toc } from '~/components/Toc'
@@ -73,10 +73,10 @@ export const Route = createFileRoute('/_libraries/blog/$')({
       if (!headerImage) return undefined
 
       // Use Netlify Image CDN to optimize for social media (1200x630 is the standard for og:image)
-      const netlifyImageUrl = `https://tanstack.com/.netlify/images?url=${encodeURIComponent(
+
+      return `https://tanstack.com/.netlify/images?url=${encodeURIComponent(
         headerImage,
       )}&w=1200&h=630&fit=cover&fm=jpg&q=80`
-      return netlifyImageUrl
     }
 
     return {
diff --git a/src/routes/_libraries/feed.$id.tsx b/src/routes/_libraries/feed.$id.tsx
index ac13f6b38..c397de36f 100644
--- a/src/routes/_libraries/feed.$id.tsx
+++ b/src/routes/_libraries/feed.$id.tsx
@@ -5,7 +5,7 @@ import { useCapabilities } from '~/hooks/useCapabilities'
 import { isAdmin } from '~/db/types'
 import * as v from 'valibot'
 import { format, formatDistanceToNow } from '~/utils/dates'
-import { Markdown } from '~/components/Markdown'
+import { Markdown } from '~/components/markdown'
 import { libraries } from '~/libraries'
 import { partners } from '~/utils/partners'
 import { twMerge } from 'tailwind-merge'
diff --git a/src/routes/_libraries/table.$version.index.tsx b/src/routes/_libraries/table.$version.index.tsx
index 6d0524d6a..541dc2c00 100644
--- a/src/routes/_libraries/table.$version.index.tsx
+++ b/src/routes/_libraries/table.$version.index.tsx
@@ -10,7 +10,7 @@ import { MaintainersSection } from '~/components/MaintainersSection'
 import { LazySponsorSection } from '~/components/LazySponsorSection'
 import { StackBlitzEmbed } from '~/components/StackBlitzEmbed'
 import { FrameworkIconTabs } from '~/components/FrameworkIconTabs'
-import { CodeBlock } from '~/components/CodeBlock'
+import { CodeBlock } from '~/components/markdown'
 import { BottomCTA } from '~/components/BottomCTA'
 import { Framework, getBranch, getLibrary } from '~/libraries'
 import { seo } from '~/utils/seo'
diff --git a/src/styles/app.css b/src/styles/app.css
index db3f09830..1addb3a72 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -341,11 +341,11 @@ button {
 /* https://github.com/shikijs/twoslash/tree/main/packages/remark-shiki-twoslash#plugin-setup */
 pre {
   /* All code samples get a grey border, twoslash ones get a different color */
-  @apply text-black p-2;
-  @apply overflow-x-auto relative leading-tight;
+  @apply text-black overflow-x-auto relative leading-tight;
 }
 pre.shiki {
   overflow-x: auto;
+  padding: 1rem;
 
   @apply bg-white;
 
@@ -369,7 +369,7 @@ pre.shiki div.highlight {
   background-color: #f1f8ff;
 }
 pre.shiki div.line {
-  min-height: 1rem;
+  min-height: auto;
 }
 
 /** Don't show the language identifiers */
@@ -721,7 +721,7 @@ html.dark .shiki.vitesse-dark span[style*='color: #51597D'] {
   @apply border-blue-500/90;
 }
 
-.markdown-alert.markdown-alert-note svg {
+.markdown-alert.markdown-alert-note .markdown-alert-title svg {
   @apply fill-blue-500/90;
 }
 
@@ -729,7 +729,7 @@ html.dark .shiki.vitesse-dark span[style*='color: #51597D'] {
   @apply border-yellow-500/90;
 }
 
-.markdown-alert.markdown-alert-warning svg {
+.markdown-alert.markdown-alert-warning .markdown-alert-title svg {
   @apply fill-yellow-500/90;
 }
 
@@ -737,7 +737,7 @@ html.dark .shiki.vitesse-dark span[style*='color: #51597D'] {
   @apply border-red-500/90;
 }
 
-.markdown-alert.markdown-alert-caution svg {
+.markdown-alert.markdown-alert-caution .markdown-alert-title svg {
   @apply fill-red-500/90;
 }
 
@@ -745,7 +745,7 @@ html.dark .shiki.vitesse-dark span[style*='color: #51597D'] {
   @apply border-green-500/90;
 }
 
-.markdown-alert.markdown-alert-tip svg {
+.markdown-alert.markdown-alert-tip .markdown-alert-title svg {
   @apply fill-green-500/90;
 }
 
@@ -753,7 +753,7 @@ html.dark .shiki.vitesse-dark span[style*='color: #51597D'] {
   @apply border-purple-500/90;
 }
 
-.markdown-alert.markdown-alert-important svg {
+.markdown-alert.markdown-alert-important .markdown-alert-title svg {
   @apply fill-purple-500/90;
 }
 
diff --git a/src/utils/markdown/plugins/collectHeadings.ts b/src/utils/markdown/plugins/collectHeadings.ts
index 7cdeec6f9..852b604af 100644
--- a/src/utils/markdown/plugins/collectHeadings.ts
+++ b/src/utils/markdown/plugins/collectHeadings.ts
@@ -27,17 +27,14 @@ type VFileData = {
 
 const isTabsAncestor = (ancestor: HastElement) => {
   if (ancestor.type !== 'element') {
-    console.log('skip')
     return false
   }
 
   if (ancestor.tagName !== 'md-comment-component') {
-    console.log('skip')
     return false
   }
 
   const component = ancestor.properties?.['data-component']
-  console.log('dont skip', component)
   return typeof component === 'string' && component.toLowerCase() === 'tabs'
 }
 
diff --git a/src/utils/markdown/plugins/index.ts b/src/utils/markdown/plugins/index.ts
index ee8ef639f..de6969411 100644
--- a/src/utils/markdown/plugins/index.ts
+++ b/src/utils/markdown/plugins/index.ts
@@ -1,4 +1,8 @@
 export { rehypeParseCommentComponents } from './parseCommentComponents'
 export { rehypeTransformCommentComponents } from './transformCommentComponents'
+export {
+  rehypeTransformFrameworkComponents,
+  transformFrameworkComponent,
+} from './transformFrameworkComponent'
 export { transformTabsComponent } from './transformTabsComponent'
 export { type MarkdownHeading, rehypeCollectHeadings } from './collectHeadings'
diff --git a/src/utils/markdown/plugins/transformFrameworkComponent.ts b/src/utils/markdown/plugins/transformFrameworkComponent.ts
new file mode 100644
index 000000000..50f3f83fa
--- /dev/null
+++ b/src/utils/markdown/plugins/transformFrameworkComponent.ts
@@ -0,0 +1,190 @@
+import { toString } from 'hast-util-to-string'
+import { visit } from 'unist-util-visit'
+
+import { isHeading, normalizeComponentName } from './helpers'
+
+type HastNode = {
+  type: string
+  tagName: string
+  properties?: Record<string, unknown>
+  children?: HastNode[]
+}
+
+type FrameworkCodeBlock = {
+  title: string
+  code: string
+  language: string
+  preNode: HastNode
+}
+
+type FrameworkExtraction = {
+  codeBlocksByFramework: Record<string, FrameworkCodeBlock[]>
+  contentByFramework: Record<string, HastNode[]>
+}
+
+// Helper to extract text from nodes (used for code content)
+function extractText(nodes: any[]): string {
+  let text = ''
+  for (const node of nodes) {
+    if (node.type === 'text') {
+      text += node.value
+    } else if (node.type === 'element' && node.children) {
+      text += extractText(node.children)
+    }
+  }
+  return text
+}
+
+/**
+ * Extract code block data (language, title, code) from a <pre> element.
+ * Extracts title from data-code-title (set by rehypeCodeMeta).
+ */
+function extractCodeBlockData(preNode: HastNode): {
+  language: string
+  title: string
+  code: string
+} | null {
+  // Find the <code> child
+  const codeNode = preNode.children?.find(
+    (c: HastNode) => c.type === 'element' && c.tagName === 'code',
+  )
+
+  if (!codeNode) return null
+
+  // Extract language from className
+  let language = 'plaintext'
+  const className = codeNode.properties?.className
+  if (Array.isArray(className)) {
+    const langClass = className.find((c) => String(c).startsWith('language-'))
+    if (langClass) {
+      language = String(langClass).replace('language-', '')
+    }
+  }
+
+  let title = ''
+  const props = preNode.properties || {}
+  if (typeof props['dataCodeTitle'] === 'string') {
+    title = props['dataCodeTitle'] as string
+  } else if (typeof props['data-code-title'] === 'string') {
+    title = props['data-code-title']
+  } else if (typeof props['dataFilename'] === 'string') {
+    title = props['dataFilename'] as string
+  } else if (typeof props['data-filename'] === 'string') {
+    title = props['data-filename']
+  }
+
+  // Extract code content
+  const code = extractText(codeNode.children || [])
+
+  return { language, title, code }
+}
+
+/**
+ * Extract framework-specific content for framework component.
+ * Groups all content (code blocks and general content) by framework headings.
+ */
+function extractFrameworkData(node: HastNode): FrameworkExtraction | null {
+  const children = node.children ?? []
+  const codeBlocksByFramework: Record<string, FrameworkCodeBlock[]> = {}
+  const contentByFramework: Record<string, HastNode[]> = {}
+
+  let currentFramework: string | null = null
+
+  for (const child of children) {
+    if (isHeading(child)) {
+      currentFramework = toString(child as any)
+        .trim()
+        .toLowerCase()
+      // Initialize arrays for this framework
+      if (currentFramework && !contentByFramework[currentFramework]) {
+        contentByFramework[currentFramework] = []
+        codeBlocksByFramework[currentFramework] = []
+      }
+      continue
+    }
+
+    // Skip if no framework heading found yet
+    if (!currentFramework) continue
+
+    // Add all content to contentByFramework
+    contentByFramework[currentFramework].push(child)
+
+    // Look for <pre> elements (code blocks) under current framework
+    if ((child as any).type === 'element' && (child as any).tagName === 'pre') {
+      const codeBlockData = extractCodeBlockData(child)
+      if (!codeBlockData) continue
+
+      codeBlocksByFramework[currentFramework].push({
+        title: codeBlockData.title || 'Untitled',
+        code: codeBlockData.code,
+        language: codeBlockData.language,
+        preNode: child,
+      })
+    }
+  }
+
+  // Return null only if no frameworks found at all
+  if (Object.keys(contentByFramework).length === 0) {
+    return null
+  }
+
+  return { codeBlocksByFramework, contentByFramework }
+}
+
+export function transformFrameworkComponent(node: HastNode) {
+  const result = extractFrameworkData(node)
+
+  if (!result) {
+    return
+  }
+
+  node.properties = node.properties || {}
+  node.properties['data-framework-meta'] = JSON.stringify({
+    codeBlocksByFramework: Object.fromEntries(
+      Object.entries(result.codeBlocksByFramework).map(([fw, blocks]) => [
+        fw,
+        blocks.map((b) => ({
+          title: b.title,
+          code: b.code,
+          language: b.language,
+        })),
+      ]),
+    ),
+  })
+
+  // Store available frameworks for the component
+  const availableFrameworks = Object.keys(result.contentByFramework)
+  node.properties['data-available-frameworks'] =
+    JSON.stringify(availableFrameworks)
+
+  node.children = availableFrameworks.map((fw) => {
+    const content = result.contentByFramework[fw] || []
+    return {
+      type: 'element',
+      tagName: 'md-framework-panel',
+      properties: {
+        'data-framework': fw,
+      },
+      children: content,
+    }
+  })
+}
+
+/**
+ * Rehype plugin to transform framework components in the AST.
+ * Visits the tree and calls transformFrameworkComponent for each framework component found.
+ */
+export const rehypeTransformFrameworkComponents = () => {
+  return (tree: any) => {
+    visit(tree, 'element', (node) => {
+      if (node.tagName !== 'md-comment-component') {
+        return
+      }
+
+      const component = String(node.properties?.['data-component'] ?? '')
+      if (normalizeComponentName(component) === 'framework') {
+        transformFrameworkComponent(node)
+      }
+    })
+  }
+}
diff --git a/src/utils/markdown/plugins/transformTabsComponent.ts b/src/utils/markdown/plugins/transformTabsComponent.ts
index 6e996685e..58181780f 100644
--- a/src/utils/markdown/plugins/transformTabsComponent.ts
+++ b/src/utils/markdown/plugins/transformTabsComponent.ts
@@ -7,7 +7,7 @@ export type VariantHandler = (
   attributes: Record<string, string>,
 ) => boolean
 
-type InstallMode = 'install' | 'dev-install'
+type InstallMode = 'install' | 'dev-install' | 'local-install'
 
 type HastNode = {
   type: string
@@ -40,26 +40,6 @@ type FilesExtraction = {
   }>
 }
 
-type FrameworkExtraction = {
-  codeBlocksByFramework: Record<
-    string,
-    Array<{
-      title: string
-      code: string
-      language: string
-      preNode: HastNode
-    }>
-  >
-  contentByFramework: Record<string, HastNode[]>
-}
-
-type FrameworkCodeBlock = {
-  title: string
-  code: string
-  language: string
-  preNode: HastNode
-}
-
 function parseAttributes(node: HastNode): Record<string, string> {
   const rawAttributes = node.properties?.['data-attributes']
   if (typeof rawAttributes === 'string') {
@@ -227,58 +207,6 @@ function extractFilesData(node: HastNode): FilesExtraction | null {
   return { files }
 }
 
-/**
- * Extract framework-specific content for variant="framework" tabs.
- * Groups all content (code blocks and general content) by framework headings.
- */
-function extractFrameworkData(node: HastNode): FrameworkExtraction | null {
-  const children = node.children ?? []
-  const codeBlocksByFramework: Record<string, FrameworkCodeBlock[]> = {}
-  const contentByFramework: Record<string, HastNode[]> = {}
-
-  let currentFramework: string | null = null
-
-  for (const child of children) {
-    if (isHeading(child)) {
-      currentFramework = toString(child as any)
-        .trim()
-        .toLowerCase()
-      // Initialize arrays for this framework
-      if (currentFramework && !contentByFramework[currentFramework]) {
-        contentByFramework[currentFramework] = []
-        codeBlocksByFramework[currentFramework] = []
-      }
-      continue
-    }
-
-    // Skip if no framework heading found yet
-    if (!currentFramework) continue
-
-    // Add all content to contentByFramework
-    contentByFramework[currentFramework].push(child)
-
-    // Look for <pre> elements (code blocks) under current framework
-    if (child.type === 'element' && child.tagName === 'pre') {
-      const codeBlockData = extractCodeBlockData(child)
-      if (!codeBlockData) continue
-
-      codeBlocksByFramework[currentFramework].push({
-        title: codeBlockData.title || 'Untitled',
-        code: codeBlockData.code,
-        language: codeBlockData.language,
-        preNode: child,
-      })
-    }
-  }
-
-  // Return null only if no frameworks found at all
-  if (Object.keys(contentByFramework).length === 0) {
-    return null
-  }
-
-  return { codeBlocksByFramework, contentByFramework }
-}
-
 function extractTabPanels(node: HastNode): TabExtraction | null {
   const children = node.children ?? []
   const headings = children.filter(isHeading)
@@ -407,46 +335,6 @@ export function transformTabsComponent(node: HastNode) {
     return
   }
 
-  if (variant === 'framework') {
-    const result = extractFrameworkData(node)
-
-    if (!result) {
-      return
-    }
-
-    node.properties = node.properties || {}
-    node.properties['data-framework-meta'] = JSON.stringify({
-      codeBlocksByFramework: Object.fromEntries(
-        Object.entries(result.codeBlocksByFramework).map(([fw, blocks]) => [
-          fw,
-          blocks.map((b) => ({
-            title: b.title,
-            code: b.code,
-            language: b.language,
-          })),
-        ]),
-      ),
-    })
-
-    // Store available frameworks for the component
-    const availableFrameworks = Object.keys(result.contentByFramework)
-    node.properties['data-available-frameworks'] =
-      JSON.stringify(availableFrameworks)
-
-    node.children = availableFrameworks.map((fw) => {
-      const content = result.contentByFramework[fw] || []
-      return {
-        type: 'element',
-        tagName: 'md-tab-panel',
-        properties: {
-          'data-framework': fw,
-        },
-        children: content,
-      }
-    })
-    return
-  }
-
   // Handle default tabs variant
   const result = extractTabPanels(node)
   if (!result) {
diff --git a/src/utils/markdown/processor.ts b/src/utils/markdown/processor.ts
index 295ca3080..484622b13 100644
--- a/src/utils/markdown/processor.ts
+++ b/src/utils/markdown/processor.ts
@@ -12,6 +12,7 @@ import {
   rehypeCollectHeadings,
   rehypeParseCommentComponents,
   rehypeTransformCommentComponents,
+  rehypeTransformFrameworkComponents,
 } from '~/utils/markdown/plugins'
 import { extractCodeMeta } from '~/utils/markdown/plugins/extractCodeMeta'
 
@@ -39,35 +40,25 @@ export function renderMarkdown(content: string): MarkdownRenderResult {
     .use(rehypeCallouts, {
       theme: 'github',
       props: {
-        containerProps(node: any, type: string) {
-          return {
-            className: `markdown-alert markdown-alert-${type}`,
-            children: node.children,
-          }
-        },
-        titleIconProps() {
-          return {
-            className: 'octicon octicon-info mr-2',
-          }
-        },
-        titleProps() {
-          return {
-            className: 'markdown-alert-title',
-          }
-        },
-        titleTextProps() {
-          return {
-            className: 'markdown-alert-title',
-          }
-        },
-        contentProps() {
-          return {
-            className: 'markdown-alert-content',
-          }
-        },
+        containerProps: (_node: any, type: string) => ({
+          className: `markdown-alert markdown-alert-${type}`,
+        }),
+        titleIconProps: () => ({
+          className: 'octicon octicon-info mr-2',
+        }),
+        titleProps: () => ({
+          className: 'markdown-alert-title',
+        }),
+        titleTextProps: () => ({
+          className: 'markdown-alert-title',
+        }),
+        contentProps: () => ({
+          className: 'markdown-alert-content',
+        }),
       },
     } as any)
     .use(rehypeSlug)
+    .use(rehypeTransformFrameworkComponents)
     .use(rehypeTransformCommentComponents)
     .use(rehypeAutolinkHeadings, {
       behavior: 'wrap',
@@ -76,8 +67,9 @@ export function renderMarkdown(content: string): MarkdownRenderResult {
       },
     })
     .use(() => rehypeCollectHeadings(headings))
+    .use(rehypeStringify)
 
-  const file = processor.use(rehypeStringify).processSync(content)
+  const file = processor.processSync(content)
 
   return {
     markup: String(file),
diff --git a/src/utils/partners.tsx b/src/utils/partners.tsx
index e7dc35a93..4d0a1b304 100644
--- a/src/utils/partners.tsx
+++ b/src/utils/partners.tsx
@@ -67,6 +67,8 @@ export function PartnerImage({
           loading="lazy"
           className="w-full dark:hidden"
           width={200}
+          height={100}
+          sizes="(max-width: 640px) 80px, (max-width: 1024px) 150px, 200px"
         />
         <img
           src={config.dark}
@@ -74,6 +76,8 @@ export function PartnerImage({
           loading="lazy"
           className="w-full hidden dark:block"
           width={200}
+          height={100}
+          sizes="(max-width: 640px) 80px, (max-width: 1024px) 150px, 200px"
         />
       </div>
     )
@@ -86,7 +90,9 @@ export function PartnerImage({
         alt={alt}
         className="w-full"
         width={200}
+        height={100}
         loading="lazy"
+        sizes="(max-width: 640px) 80px, (max-width: 1024px) 150px, 200px"
       />
     </div>
   )