From a1c187654d886e53209e5f94ebd4934c0bc2a2ed Mon Sep 17 00:00:00 2001
From: ladybluenotes <hello@sarahgerrard.me>
Date: Fri, 9 Jan 2026 12:31:48 -0800
Subject: [PATCH 1/8] fix: refine styling for code blocks and tabs

---
 src/components/CodeBlock.tsx |  2 +-
 src/components/Tabs.tsx      |  8 ++++----
 src/styles/app.css           | 24 +++++++++---------------
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
index 19a463fdf..ca069dc55 100644
--- a/src/components/CodeBlock.tsx
+++ b/src/components/CodeBlock.tsx
@@ -194,7 +194,7 @@ export function CodeBlock({
       style={props.style}
     >
       {(title || showTypeCopyButton) && (
-        <div className="flex items-center justify-between px-4 py-2 border-b border-gray-500/20 bg-gray-50 dark:bg-gray-900">
+        <div className="flex items-center justify-between px-4 py-2 bg-gray-50 dark:bg-gray-900">
           <div className="text-xs text-gray-700 dark:text-gray-300">
             {title || (lang?.toLowerCase() === 'bash' ? 'sh' : (lang ?? ''))}
           </div>
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 586bc3e31..e08cfdb1d 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -50,8 +50,8 @@ export function Tabs({
   if (tabsProp.length === 0) return null
 
   return (
-    <div className="not-prose my-4">
-      <div className="flex items-center justify-start gap-2 rounded-t-md border-1 border-b-none border-gray-200 dark:border-gray-800 overflow-x-auto overflow-y-hidden bg-white dark:bg-gray-950">
+    <div className="my-4">
+      <div className="not-prose flex items-center justify-start gap-2 rounded-t-md border-1 border-b-none border-gray-200 dark:border-gray-800 overflow-x-auto overflow-y-hidden bg-white dark:bg-gray-950">
         {tabsProp.map((tab) => {
           return (
             <Tab
@@ -64,7 +64,7 @@ export function Tabs({
           )
         })}
       </div>
-      <div className="border border-gray-500/20 rounded-b-md p-4 bg-gray-100 dark:bg-gray-900">
+      <div className={`border border-gray-500/20 rounded-b-md bg-gray-100 dark:bg-gray-900`}>
         {childrenArray.map((child, index) => {
           const tab = tabsProp[index]
           if (!tab) return null
@@ -73,7 +73,7 @@ export function Tabs({
               key={`${id}-${tab.slug}`}
               data-tab={tab.slug}
               hidden={tab.slug !== activeSlug}
-              className="prose dark:prose-invert max-w-none flex flex-col gap-2 text-base"
+              className="max-w-none flex flex-col gap-2 text-base"
             >
               {child}
             </div>
diff --git a/src/styles/app.css b/src/styles/app.css
index c2e3f92d8..cce053ce0 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -878,7 +878,7 @@ mark {
 
 /* Hide the title bar but keep copy button accessible */
 .file-tabs-panel .codeblock > div:first-child {
-  @apply absolute right-2 top-2 bg-transparent border-0 p-0 z-10;
+  @apply absolute right-2 top-2 bg-transparent border-none p-0 z-10;
 }
 
 /* Hide the title text, keep only the button */
@@ -892,7 +892,11 @@ mark {
 }
 
 .package-manager-tabs [data-tab] .codeblock > div:first-child {
-  @apply absolute right-2 top-2 bg-transparent border-0 p-0 z-10;
+  @apply absolute right-2 top-2 bg-transparent border-none p-0 z-10;
+}
+
+.package-manager-tabs .codeblock {
+  border: none;
 }
 
 .package-manager-tabs
@@ -905,7 +909,7 @@ mark {
 
 /* Remove padding from tab content wrapper for package manager */
 .package-manager-tabs .not-prose > div:last-child {
-  @apply p-0 border-0 rounded-b-none bg-transparent;
+  @apply p-0 border-none rounded-b-none bg-transparent;
 }
 
 /* Restore bottom border radius on the code block itself */
@@ -913,17 +917,7 @@ mark {
   @apply rounded-b-md;
 }
 
-/* Framework code blocks - minimal style for single code blocks */
+/* Framework code blocks - single blocks look like regular code blocks */
 .framework-code-block > .codeblock {
-  @apply my-4 rounded-md;
-}
-
-/* Hide the title bar but keep copy button accessible for single blocks */
-.framework-code-block > .codeblock > div:first-child {
-  @apply absolute right-2 top-2 bg-transparent border-0 p-0 z-10;
-}
-
-/* Hide the title text, keep only the button */
-.framework-code-block > .codeblock > div:first-child > div:first-child {
-  @apply hidden;
+  @apply my-4;
 }

From ebdbce0e7169b4ccf1085c32f75d178072e615cf Mon Sep 17 00:00:00 2001
From: ladybluenotes <hello@sarahgerrard.me>
Date: Fri, 9 Jan 2026 12:46:07 -0800
Subject: [PATCH 2/8] fix: improve tab matching logic and enhance component
 structure

---
 src/components/Tabs.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index e08cfdb1d..7a2ff7c54 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -64,7 +64,9 @@ export function Tabs({
           )
         })}
       </div>
-      <div className={`border border-gray-500/20 rounded-b-md bg-gray-100 dark:bg-gray-900`}>
+      <div
+        className={`border border-gray-500/20 rounded-b-md bg-gray-100 dark:bg-gray-900`}
+      >
         {childrenArray.map((child, index) => {
           const tab = tabsProp[index]
           if (!tab) return null
@@ -96,8 +98,13 @@ const Tab = React.memo(
     setActiveSlug: (slug: string) => void
   }) => {
     const option = React.useMemo(
-      () => frameworkOptions.find((o) => o.value === tab.slug),
-      [tab.slug],
+      () =>
+        frameworkOptions.find(
+          (o) =>
+            o.value === tab.slug.toLowerCase() ||
+            o.label.toLowerCase() === tab.name.toLowerCase(),
+        ),
+      [tab.slug, tab.name],
     )
 
     return (

From 3e1a8b39b461fde9a5f6df73544ac2043fa039ec Mon Sep 17 00:00:00 2001
From: ladybluenotes <hello@sarahgerrard.me>
Date: Fri, 9 Jan 2026 13:01:18 -0800
Subject: [PATCH 3/8] fix: update FrameworkCodeBlock to handle content and code
 blocks more effectively

---
 src/components/FrameworkCodeBlock.tsx         | 25 ++++++++----
 .../plugins/transformTabsComponent.ts         | 38 +++++++++++--------
 2 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/components/FrameworkCodeBlock.tsx b/src/components/FrameworkCodeBlock.tsx
index 8d065baef..c5f3bc654 100644
--- a/src/components/FrameworkCodeBlock.tsx
+++ b/src/components/FrameworkCodeBlock.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useLocalCurrentFramework } from './FrameworkSelect'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { useParams } from '@tanstack/react-router'
-import { FileTabs } from './FileTabs'
+import { Tabs } from './Tabs'
 import type { Framework } from '~/libraries/types'
 
 type CodeBlockMeta = {
@@ -22,8 +22,9 @@ type FrameworkCodeBlockProps = {
 /**
  * Renders code blocks for the currently selected framework.
  * - If no blocks for framework: shows nothing
- * - If 1 block: shows just the code block (minimal style)
- * - If multiple blocks: shows as FileTabs (file tabs with names)
+ * - 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({
   id,
@@ -43,17 +44,25 @@ export function FrameworkCodeBlock({
   const normalizedFramework = actualFramework.toLowerCase()
 
   // Find the framework's code blocks
-  const frameworkBlocks = codeBlocksByFramework[normalizedFramework]
+  const frameworkBlocks = codeBlocksByFramework[normalizedFramework] || []
   const frameworkPanel = panelsByFramework[normalizedFramework]
 
-  if (!frameworkBlocks || frameworkBlocks.length === 0 || !frameworkPanel) {
+  // If no panel content at all for this framework, show nothing
+  if (!frameworkPanel) {
     return null
   }
 
+  // If no code blocks, just render the content directly
+  if (frameworkBlocks.length === 0) {
+    return <div className="framework-code-block">{frameworkPanel}</div>
+  }
+
+  // If 1 code block, render minimal style
   if (frameworkBlocks.length === 1) {
     return <div className="framework-code-block">{frameworkPanel}</div>
   }
 
+  // Multiple code blocks - show as file tabs
   const tabs = frameworkBlocks.map((block, index) => ({
     slug: `file-${index}`,
     name: block.title || 'Untitled',
@@ -63,9 +72,9 @@ export function FrameworkCodeBlock({
 
   return (
     <div className="framework-code-block">
-      <FileTabs id={`${id}-${normalizedFramework}`} tabs={tabs}>
+      <Tabs id={`${id}-${normalizedFramework}`} tabs={tabs} variant="files">
         {childrenArray}
-      </FileTabs>
+      </Tabs>
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/src/utils/markdown/plugins/transformTabsComponent.ts b/src/utils/markdown/plugins/transformTabsComponent.ts
index 257c12895..58ca60419 100644
--- a/src/utils/markdown/plugins/transformTabsComponent.ts
+++ b/src/utils/markdown/plugins/transformTabsComponent.ts
@@ -50,6 +50,7 @@ type FrameworkExtraction = {
       preNode: HastNode
     }>
   >
+  contentByFramework: Record<string, HastNode[]>
 }
 
 type FrameworkCodeBlock = {
@@ -223,12 +224,13 @@ function extractFilesData(node: HastNode): FilesExtraction | null {
 }
 
 /**
- * Extract framework-specific code blocks for variant="framework" tabs.
- * Groups code blocks by their data-framework attribute.
+ * 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
 
@@ -237,22 +239,25 @@ function extractFrameworkData(node: HastNode): FrameworkExtraction | null {
       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' &&
-      currentFramework
-    ) {
+    if (child.type === 'element' && child.tagName === 'pre') {
       const codeBlockData = extractCodeBlockData(child)
       if (!codeBlockData) continue
 
-      if (!codeBlocksByFramework[currentFramework]) {
-        codeBlocksByFramework[currentFramework] = []
-      }
-
       codeBlocksByFramework[currentFramework].push({
         title: codeBlockData.title || 'Untitled',
         code: codeBlockData.code,
@@ -262,11 +267,12 @@ function extractFrameworkData(node: HastNode): FrameworkExtraction | null {
     }
   }
 
-  if (Object.keys(codeBlocksByFramework).length === 0) {
+  // Return null only if no frameworks found at all
+  if (Object.keys(contentByFramework).length === 0) {
     return null
   }
 
-  return { codeBlocksByFramework }
+  return { codeBlocksByFramework, contentByFramework }
 }
 
 function extractTabPanels(node: HastNode): TabExtraction | null {
@@ -419,19 +425,19 @@ export function transformTabsComponent(node: HastNode) {
     })
 
     // Store available frameworks for the component
-    const availableFrameworks = Object.keys(result.codeBlocksByFramework)
+    const availableFrameworks = Object.keys(result.contentByFramework)
     node.properties['data-available-frameworks'] =
       JSON.stringify(availableFrameworks)
 
     node.children = availableFrameworks.map((fw) => {
-      const blocks = result.codeBlocksByFramework[fw]
+      const content = result.contentByFramework[fw] || []
       return {
         type: 'element',
         tagName: 'md-tab-panel',
         properties: {
           'data-framework': fw,
         },
-        children: blocks.map((block) => block.preNode),
+        children: content,
       }
     })
     return

From 3c4abb10c753ef37cb2929794659a436ee70773e Mon Sep 17 00:00:00 2001
From: ladybluenotes <hello@sarahgerrard.me>
Date: Fri, 9 Jan 2026 13:04:32 -0800
Subject: [PATCH 4/8] fix: add support for local-install mode in
 PackageManagerTabs

---
 src/components/PackageManagerTabs.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/PackageManagerTabs.tsx b/src/components/PackageManagerTabs.tsx
index 61f2b1eb1..d884a6917 100644
--- a/src/components/PackageManagerTabs.tsx
+++ b/src/components/PackageManagerTabs.tsx
@@ -7,7 +7,7 @@ import { CodeBlock } from './CodeBlock'
 import type { Framework } from '~/libraries/types'
 
 type PackageManager = 'bun' | 'npm' | 'pnpm' | 'yarn'
-type InstallMode = 'install' | 'dev-install'
+type InstallMode = 'install' | 'dev-install' | 'local-install'
 
 // Use zustand for cross-component synchronization
 // This ensures all PackageManagerTabs instances on the page stay in sync
@@ -41,6 +41,25 @@ function getInstallCommand(
 ): string[] {
   const commands: string[] = []
 
+  if (mode === "local-install") {
+    for (const pkg of packages) {
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npx ${pkg}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpx ${pkg}`)
+          break
+        case 'yarn':
+          commands.push(`yarn dlx ${pkg}`)
+          break
+        case 'bun':
+          commands.push(`bunx ${pkg}`)
+          break
+      }
+    }
+  }
+
   if (mode === 'dev-install') {
     for (const pkg of packages) {
       switch (packageManager) {

From 8dda55a9ab63510babe6f50f96b3a4bc429459c2 Mon Sep 17 00:00:00 2001
From: ladybluenotes <hello@sarahgerrard.me>
Date: Fri, 9 Jan 2026 13:21:36 -0800
Subject: [PATCH 5/8] fix: update PackageManagerTabs and transformTabsComponent
 to support multiple package installations per framework

---
 src/components/PackageManagerTabs.tsx         | 47 ++++++++++---------
 .../plugins/transformTabsComponent.ts         | 18 ++++---
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/components/PackageManagerTabs.tsx b/src/components/PackageManagerTabs.tsx
index d884a6917..c7b191d3e 100644
--- a/src/components/PackageManagerTabs.tsx
+++ b/src/components/PackageManagerTabs.tsx
@@ -27,7 +27,7 @@ const usePackageManagerStore = create<{
 
 type PackageManagerTabsProps = {
   id: string
-  packagesByFramework: Record<string, string[]>
+  packagesByFramework: Record<string, string[][]>
   mode: InstallMode
   frameworks: Framework[]
 }
@@ -36,44 +36,48 @@ const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'pnpm', 'yarn', 'bun']
 
 function getInstallCommand(
   packageManager: PackageManager,
-  packages: string[],
+  packageGroups: string[][],
   mode: InstallMode,
 ): string[] {
   const commands: string[] = []
 
-  if (mode === "local-install") {
-    for (const pkg of packages) {
+  if (mode === 'local-install') {
+    // Each group becomes one command line
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
       switch (packageManager) {
         case 'npm':
-          commands.push(`npx ${pkg}`)
+          commands.push(`npx ${pkgStr}`)
           break
         case 'pnpm':
-          commands.push(`pnpx ${pkg}`)
+          commands.push(`pnpx ${pkgStr}`)
           break
         case 'yarn':
-          commands.push(`yarn dlx ${pkg}`)
+          commands.push(`yarn dlx ${pkgStr}`)
           break
         case 'bun':
-          commands.push(`bunx ${pkg}`)
+          commands.push(`bunx ${pkgStr}`)
           break
       }
     }
+    return commands
   }
 
   if (mode === 'dev-install') {
-    for (const pkg of packages) {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
       switch (packageManager) {
         case 'npm':
-          commands.push(`npm i -D ${pkg}`)
+          commands.push(`npm i -D ${pkgStr}`)
           break
         case 'pnpm':
-          commands.push(`pnpm add -D ${pkg}`)
+          commands.push(`pnpm add -D ${pkgStr}`)
           break
         case 'yarn':
-          commands.push(`yarn add -D ${pkg}`)
+          commands.push(`yarn add -D ${pkgStr}`)
           break
         case 'bun':
-          commands.push(`bun add -d ${pkg}`)
+          commands.push(`bun add -d ${pkgStr}`)
           break
       }
     }
@@ -81,19 +85,20 @@ function getInstallCommand(
   }
 
   // install mode
-  for (const pkg of packages) {
+  for (const packages of packageGroups) {
+    const pkgStr = packages.join(' ')
     switch (packageManager) {
       case 'npm':
-        commands.push(`npm i ${pkg}`)
+        commands.push(`npm i ${pkgStr}`)
         break
       case 'pnpm':
-        commands.push(`pnpm add ${pkg}`)
+        commands.push(`pnpm add ${pkgStr}`)
         break
       case 'yarn':
-        commands.push(`yarn add ${pkg}`)
+        commands.push(`yarn add ${pkgStr}`)
         break
       case 'bun':
-        commands.push(`bun add ${pkg}`)
+        commands.push(`bun add ${pkgStr}`)
         break
     }
   }
@@ -119,10 +124,10 @@ export function PackageManagerTabs({
     'react') as Framework
 
   const normalizedFramework = actualFramework.toLowerCase()
-  const packages = packagesByFramework[normalizedFramework]
+  const packageGroups = packagesByFramework[normalizedFramework]
 
   // Hide component if current framework not in package list
-  if (!packages || packages.length === 0) {
+  if (!packageGroups || packageGroups.length === 0) {
     return null
   }
 
@@ -140,7 +145,7 @@ export function PackageManagerTabs({
 
   // Generate children (command blocks) for each package manager
   const children = PACKAGE_MANAGERS.map((pm) => {
-    const commands = getInstallCommand(pm, packages, mode)
+    const commands = getInstallCommand(pm, packageGroups, mode)
     const commandText = commands.join('\n')
     return (
       <CodeBlock key={pm}>
diff --git a/src/utils/markdown/plugins/transformTabsComponent.ts b/src/utils/markdown/plugins/transformTabsComponent.ts
index 58ca60419..dafb50eb4 100644
--- a/src/utils/markdown/plugins/transformTabsComponent.ts
+++ b/src/utils/markdown/plugins/transformTabsComponent.ts
@@ -27,7 +27,7 @@ type TabExtraction = {
 }
 
 type PackageManagerExtraction = {
-  packagesByFramework: Record<string, string[]>
+  packagesByFramework: Record<string, string[][]>
   mode: InstallMode
 }
 
@@ -74,7 +74,9 @@ function parseAttributes(node: HastNode): Record<string, string> {
 
 function resolveMode(attributes: Record<string, string>): InstallMode {
   const mode = attributes.mode?.toLowerCase()
-  return mode === 'dev-install' ? 'dev-install' : 'install'
+  if (mode === 'dev-install') return 'dev-install'
+  if (mode === 'local-install') return 'local-install'
+  return 'install'
 }
 
 function normalizeFrameworkKey(key: string): string {
@@ -123,7 +125,7 @@ function extractPackageManagerData(
   mode: InstallMode,
 ): PackageManagerExtraction | null {
   const children = node.children ?? []
-  const packagesByFramework: Record<string, string[]> = {}
+  const packagesByFramework: Record<string, string[][]> = {}
 
   const allText = extractText(children)
   const lines = allText.split('\n')
@@ -134,11 +136,13 @@ function extractPackageManagerData(
 
     const parsed = parseFrameworkLine(trimmed)
     if (parsed) {
-      // Support multiple entries for same framework by concatenating packages
+      // Each line becomes a separate entry (array of packages)
+      // Multiple packages on same line = install together
+      // Multiple lines = install separately
       if (packagesByFramework[parsed.framework]) {
-        packagesByFramework[parsed.framework].push(...parsed.packages)
+        packagesByFramework[parsed.framework].push(parsed.packages)
       } else {
-        packagesByFramework[parsed.framework] = parsed.packages
+        packagesByFramework[parsed.framework] = [parsed.packages]
       }
     }
   }
@@ -464,4 +468,4 @@ export function transformTabsComponent(node: HastNode) {
     'data-attributes': JSON.stringify({ tabs: result.tabs }),
   }
   node.children = panelElements
-}
+}
\ No newline at end of file

From c4ebec42406c4938e26c8bb515475c59cfb13d69 Mon Sep 17 00:00:00 2001
From: ladybluenotes <hello@sarahgerrard.me>
Date: Sat, 10 Jan 2026 08:58:27 -0800
Subject: [PATCH 6/8] fix: add support for 'create' mode in PackageManagerTabs
 for package management commands

---
 src/components/PackageManagerTabs.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/PackageManagerTabs.tsx b/src/components/PackageManagerTabs.tsx
index c7b191d3e..808fcb63c 100644
--- a/src/components/PackageManagerTabs.tsx
+++ b/src/components/PackageManagerTabs.tsx
@@ -7,7 +7,7 @@ import { CodeBlock } from './CodeBlock'
 import type { Framework } from '~/libraries/types'
 
 type PackageManager = 'bun' | 'npm' | 'pnpm' | 'yarn'
-type InstallMode = 'install' | 'dev-install' | 'local-install'
+type InstallMode = 'install' | 'dev-install' | 'local-install' | 'create'
 
 // Use zustand for cross-component synchronization
 // This ensures all PackageManagerTabs instances on the page stay in sync
@@ -41,6 +41,26 @@ function getInstallCommand(
 ): string[] {
   const commands: string[] = []
 
+  if (mode === 'create') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npm create ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpm create ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn create ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bun create ${pkgStr}`)
+          break
+      }
+    }
+  }
+
   if (mode === 'local-install') {
     // Each group becomes one command line
     for (const packages of packageGroups) {

From 1114f1a11050a15aaaaf6b58ab003224364e7d8d Mon Sep 17 00:00:00 2001
From: ladybluenotes <hello@sarahgerrard.me>
Date: Sat, 10 Jan 2026 09:04:33 -0800
Subject: [PATCH 7/8] fix: add support for 'custom' mode in PackageManagerTabs
 for flexible package management commands

---
 src/components/PackageManagerTabs.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/PackageManagerTabs.tsx b/src/components/PackageManagerTabs.tsx
index 808fcb63c..afed2deb4 100644
--- a/src/components/PackageManagerTabs.tsx
+++ b/src/components/PackageManagerTabs.tsx
@@ -7,7 +7,7 @@ import { CodeBlock } from './CodeBlock'
 import type { Framework } from '~/libraries/types'
 
 type PackageManager = 'bun' | 'npm' | 'pnpm' | 'yarn'
-type InstallMode = 'install' | 'dev-install' | 'local-install' | 'create'
+type InstallMode = 'install' | 'dev-install' | 'local-install' | 'create' | 'custom'
 
 // Use zustand for cross-component synchronization
 // This ensures all PackageManagerTabs instances on the page stay in sync
@@ -41,6 +41,26 @@ function getInstallCommand(
 ): string[] {
   const commands: string[] = []
 
+  if (mode === 'custom') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npm ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpm ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bun ${pkgStr}`)
+          break
+      }
+    }
+  }
+
   if (mode === 'create') {
     for (const packages of packageGroups) {
       const pkgStr = packages.join(' ')

From ddfad5eac7a037e0b5b7e75f16efc0b527e6d989 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sat, 10 Jan 2026 22:47:43 +0000
Subject: [PATCH 8/8] ci: apply automated fixes

---
 src/components/FrameworkCodeBlock.tsx                | 2 +-
 src/components/PackageManagerTabs.tsx                | 7 ++++++-
 src/utils/markdown/plugins/transformTabsComponent.ts | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/FrameworkCodeBlock.tsx b/src/components/FrameworkCodeBlock.tsx
index c5f3bc654..d00e119ef 100644
--- a/src/components/FrameworkCodeBlock.tsx
+++ b/src/components/FrameworkCodeBlock.tsx
@@ -77,4 +77,4 @@ export function FrameworkCodeBlock({
       </Tabs>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/src/components/PackageManagerTabs.tsx b/src/components/PackageManagerTabs.tsx
index afed2deb4..c6b75600a 100644
--- a/src/components/PackageManagerTabs.tsx
+++ b/src/components/PackageManagerTabs.tsx
@@ -7,7 +7,12 @@ import { CodeBlock } from './CodeBlock'
 import type { Framework } from '~/libraries/types'
 
 type PackageManager = 'bun' | 'npm' | 'pnpm' | 'yarn'
-type InstallMode = 'install' | 'dev-install' | 'local-install' | 'create' | 'custom'
+type InstallMode =
+  | 'install'
+  | 'dev-install'
+  | 'local-install'
+  | 'create'
+  | 'custom'
 
 // Use zustand for cross-component synchronization
 // This ensures all PackageManagerTabs instances on the page stay in sync
diff --git a/src/utils/markdown/plugins/transformTabsComponent.ts b/src/utils/markdown/plugins/transformTabsComponent.ts
index 7d47fb493..b07ff1643 100644
--- a/src/utils/markdown/plugins/transformTabsComponent.ts
+++ b/src/utils/markdown/plugins/transformTabsComponent.ts
@@ -468,4 +468,4 @@ export function transformTabsComponent(node: HastNode) {
     'data-attributes': JSON.stringify({ tabs: result.tabs }),
   }
   node.children = panelElements
-}
\ No newline at end of file
+}