fix: tabs/framework hydration mismatch

Author: tannerlinsley

src/components/markdown/FileTabs.tsx

@@ -8,10 +8,10 @@ export type FileTabDefinition = {
 export type FileTabsProps = {
   tabs: Array<FileTabDefinition>
   children: Array<React.ReactNode> | React.ReactNode
-  id: string
 }
 
-export function FileTabs({ tabs, id, children }: FileTabsProps) {
+export function FileTabs({ tabs, children }: FileTabsProps) {
+  const id = React.useId()
   const childrenArray = React.Children.toArray(children)
   const [activeSlug, setActiveSlug] = React.useState(tabs[0]?.slug ?? '')
 

src/components/markdown/FrameworkContent.tsx

@@ -12,7 +12,6 @@ type CodeBlockMeta = {
 }
 
 type FrameworkContentProps = {
-  id: string
   codeBlocksByFramework: Record<string, CodeBlockMeta[]>
   availableFrameworks: string[]
   /** Pre-rendered React children for each framework (from domToReact) */
@@ -27,7 +26,6 @@ type FrameworkContentProps = {
  * - If no code blocks but has content: shows the content directly
  */
 export function FrameworkContent({
-  id,
   codeBlocksByFramework,
   panelsByFramework,
 }: FrameworkContentProps) {
@@ -72,9 +70,7 @@ export function FrameworkContent({
 
   return (
     <div className="framework-content">
-      <Tabs id={`${id}-${normalizedFramework}`} tabs={tabs} variant="files">
-        {childrenArray}
-      </Tabs>
+      <Tabs tabs={tabs}>{childrenArray}</Tabs>
     </div>
   )
 }

src/components/markdown/MarkdownFrameworkHandler.tsx

@@ -36,8 +36,6 @@ export function handleFrameworkComponent(
     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 =>
@@ -56,7 +54,6 @@ export function handleFrameworkComponent(
     return (
       <React.Suspense fallback={<div>Loading...</div>}>
         <FrameworkContent
-          id={id}
           codeBlocksByFramework={codeBlocksByFramework}
           availableFrameworks={availableFrameworks}
           panelsByFramework={panelsByFramework}

src/components/markdown/MarkdownTabsHandler.tsx

@@ -43,15 +43,11 @@ export function handleTabsComponent(
   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}
@@ -68,8 +64,6 @@ export function handleTabsComponent(
   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 =>
@@ -82,7 +76,7 @@ export function handleTabsComponent(
 
       return (
         <React.Suspense fallback={<div>Loading...</div>}>
-          <FileTabs id={id} tabs={tabs} children={children as any} />
+          <FileTabs tabs={tabs} children={children as any} />
         </React.Suspense>
       )
     } catch {
@@ -92,7 +86,6 @@ export function handleTabsComponent(
 
   // 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
@@ -111,7 +104,7 @@ export function handleTabsComponent(
 
   return (
     <React.Suspense fallback={<div>Loading...</div>}>
-      <Tabs id={id} tabs={tabs} children={children as any} />
+      <Tabs tabs={tabs} children={children as any} />
     </React.Suspense>
   )
 }

src/components/markdown/PackageManagerTabs.tsx

@@ -31,7 +31,6 @@ const usePackageManagerStore = create<{
 }))
 
 type PackageManagerTabsProps = {
-  id: string
   packagesByFramework: Record<string, string[][]>
   mode: InstallMode
   frameworks: Framework[]
@@ -151,7 +150,6 @@ function getInstallCommand(
 }
 
 export function PackageManagerTabs({
-  id,
   packagesByFramework,
   mode,
 }: PackageManagerTabsProps) {
@@ -202,7 +200,6 @@ export function PackageManagerTabs({
   return (
     <div className="package-manager-tabs">
       <Tabs
-        id={id}
         tabs={tabs}
         children={children}
         activeSlug={selectedPackageManager}

src/components/markdown/Tabs.tsx

@@ -11,19 +11,17 @@ export type TabDefinition = {
 export type TabsProps = {
   tabs?: Array<TabDefinition>
   children?: Array<React.ReactNode> | React.ReactNode
-  id: string
   activeSlug?: string
   onTabChange?: (slug: string) => void
-  variant?: string
 }
 
 export function Tabs({
   tabs: tabsProp = [],
-  id,
   children: childrenProp,
   activeSlug: controlledActiveSlug,
   onTabChange,
 }: TabsProps) {
+  const id = React.useId()
   const childrenArray = React.Children.toArray(childrenProp)
 
   const params = useParams({ strict: false })