diff --git a/site/src/components/docs/FrameworkCase.astro b/site/src/components/docs/FrameworkCase.astro
index 5d43425e..c078ed95 100644
--- a/site/src/components/docs/FrameworkCase.astro
+++ b/site/src/components/docs/FrameworkCase.astro
@@ -3,15 +3,9 @@ import type { SupportedFramework } from '@/types/docs';
 
 interface Props {
   frameworks?: SupportedFramework[];
-  /**
-   * I'm running into some crazy problems with hydration.
-   * Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
-   * If you're running into that, too, this prop may be for you.
-   */
-  withHydrationWorkaround?: boolean;
 }
 
-const { frameworks, withHydrationWorkaround } = Astro.props;
+const { frameworks } = Astro.props;
 const { framework } = Astro.params;
 
 // Only render if current framework matches, or if no frameworks specified (all frameworks)
@@ -19,11 +13,19 @@ const shouldRender = !frameworks || frameworks.includes(framework as SupportedFr
 ---
 
 {
-  withHydrationWorkaround ? (
-    <div class="contents" hidden={!shouldRender}>
-      <slot />
-    </div>
-  ) : (
-    shouldRender && <slot />
-  )
+  /*
+    What I WANT to do is
+    ```
+    {shouldRender && <slot />}
+    ```
+
+    But I'm running into some crazy problems with hydration.
+    Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
+    TODO: fix this
+
+    So, while I debug those... let's do this
+  */
 }
+<div class="contents" hidden={!shouldRender}>
+  <slot />
+</div>
diff --git a/site/src/components/docs/StyleCase.astro b/site/src/components/docs/StyleCase.astro
index 0afb4c2c..5c5b8ffc 100644
--- a/site/src/components/docs/StyleCase.astro
+++ b/site/src/components/docs/StyleCase.astro
@@ -3,15 +3,9 @@ import type { AnySupportedStyle } from '@/types/docs';
 
 interface Props {
   styles?: AnySupportedStyle[];
-  /**
-   * I'm running into some crazy problems with hydration.
-   * Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
-   * If you're running into that, too, this prop may be for you.
-   */
-  withHydrationWorkaround?: boolean;
 }
 
-const { styles, withHydrationWorkaround } = Astro.props;
+const { styles } = Astro.props;
 const { style } = Astro.params;
 
 // Only render if current style matches, or if no styles specified (all styles)
@@ -19,11 +13,19 @@ const shouldRender = !styles || styles.includes(style as AnySupportedStyle);
 ---
 
 {
-  withHydrationWorkaround ? (
-    <div class="contents" hidden={!shouldRender}>
-      <slot />
-    </div>
-  ) : (
-    shouldRender && <slot />
-  )
+  /*
+    What I WANT to do is
+    ```
+    {shouldRender && <slot />}
+    ```
+
+    But I'm running into some crazy problems with hydration.
+    Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
+    TODO: fix this
+
+    So, while I debug those... let's do this
+  */
 }
+<div class="contents" hidden={!shouldRender}>
+  <slot />
+</div>
diff --git a/site/src/content/docs/concepts/architecture.mdx b/site/src/content/docs/concepts/architecture.mdx
index 327bc7bc..40360ef1 100644
--- a/site/src/content/docs/concepts/architecture.mdx
+++ b/site/src/content/docs/concepts/architecture.mdx
@@ -92,7 +92,7 @@ function Player() {
 ```
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
 <TabsRoot
   aria-label="HTML implementation"
   titles={{  html: 'HTML', javascript: 'JavaScript' }}
diff --git a/site/src/content/docs/how-to/customize-skins.mdx b/site/src/content/docs/how-to/customize-skins.mdx
index d39b796f..5777c700 100644
--- a/site/src/content/docs/how-to/customize-skins.mdx
+++ b/site/src/content/docs/how-to/customize-skins.mdx
@@ -21,7 +21,7 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
 
 ## Frosted Skin
 
-<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
 
 <TabsRoot
   aria-label="Frosted React implementation"
@@ -38,7 +38,7 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
 
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
 
 <TabsRoot
   aria-label="Frosted HTML implementation"
@@ -60,7 +60,7 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
 
 ## Minimal Skin
 
-<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
 
 <TabsRoot
   aria-label="Minimal React implementation"
@@ -77,7 +77,7 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
 
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
 
 <TabsRoot
   aria-label="Minimal HTML implementation"
diff --git a/site/src/content/docs/reference/fullscreen-button.mdx b/site/src/content/docs/reference/fullscreen-button.mdx
index 9424f430..0bcdbf24 100644
--- a/site/src/content/docs/reference/fullscreen-button.mdx
+++ b/site/src/content/docs/reference/fullscreen-button.mdx
@@ -24,7 +24,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
 
 ## Example
 
-<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
   <TabsRoot
     aria-label="React implementation"
     titles={{ component: 'Component', css: 'CSS Module' }}
@@ -42,7 +42,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
   </TabsRoot>
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
   <TabsRoot
     aria-label="HTML implementation"
     titles={{ html: 'HTML', css: 'CSS', javascript: 'JS' }}
diff --git a/site/src/content/docs/reference/mute-button.mdx b/site/src/content/docs/reference/mute-button.mdx
index 14f41bcf..9605a0a1 100644
--- a/site/src/content/docs/reference/mute-button.mdx
+++ b/site/src/content/docs/reference/mute-button.mdx
@@ -24,7 +24,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
 
 ## Example
 
-<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
   <TabsRoot
     aria-label="React implementation"
     titles={{ component: 'Component', css: 'CSS Module' }}
@@ -37,12 +37,12 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
     <TabsPanel value="css" client:load>
       <ServerCode code={cssModuleStr} lang="css" />
     </TabsPanel>
-
+    
     <MuteButtonDemo client:load />
   </TabsRoot>
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
   <TabsRoot
     aria-label="HTML implementation"
     titles={{ html: 'HTML', css: 'CSS', javascript: 'JS' }}
@@ -60,7 +60,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
       <ServerCode code={htmlJsStr} lang="js" />
     </TabsPanel>
 
-    <MuteButtonDemo client:load />
+    <MuteButtonDemo client:load /> 
   </TabsRoot>
 </FrameworkCase>
 
diff --git a/site/src/content/docs/reference/play-button.mdx b/site/src/content/docs/reference/play-button.mdx
index 9f31601e..321e3537 100644
--- a/site/src/content/docs/reference/play-button.mdx
+++ b/site/src/content/docs/reference/play-button.mdx
@@ -24,7 +24,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
 
 ## Example
 
-<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
   <TabsRoot
     aria-label="React implementation"
     titles={{ component: 'Component', css: 'CSS Module' }}
@@ -42,7 +42,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
   </TabsRoot>
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
   <TabsRoot
     aria-label="HTML implementation"
     titles={{ html: 'HTML', css: 'CSS', javascript: 'JS' }}
diff --git a/site/src/content/docs/reference/time-slider.mdx b/site/src/content/docs/reference/time-slider.mdx
index ae0d04f4..1b0f8af6 100644
--- a/site/src/content/docs/reference/time-slider.mdx
+++ b/site/src/content/docs/reference/time-slider.mdx
@@ -25,7 +25,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
 
 ## Example
 
-<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
   <TabsRoot
     aria-label="React implementation"
     titles={{ component: 'Component', css: 'CSS Module' }}
@@ -43,7 +43,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
   </TabsRoot>
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
   <TabsRoot
     aria-label="HTML implementation"
     titles={{ 'html-horizontal': 'HTML (Horizontal)', 'html-vertical': 'HTML (Vertical)', css: 'CSS' }}
diff --git a/site/src/content/docs/reference/volume-slider.mdx b/site/src/content/docs/reference/volume-slider.mdx
index 2b7e0b04..6e69ed75 100644
--- a/site/src/content/docs/reference/volume-slider.mdx
+++ b/site/src/content/docs/reference/volume-slider.mdx
@@ -25,7 +25,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
 
 ## Example
 
-<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["react"]}>
   <TabsRoot
     aria-label="React implementation"
     titles={{ component: 'Component', css: 'CSS Module' }}
@@ -43,7 +43,7 @@ import { TabsRoot, TabsPanel } from '@/components/Tabs';
   </TabsRoot>
 </FrameworkCase>
 
-<FrameworkCase frameworks={["html"]} withHydrationWorkaround>
+<FrameworkCase frameworks={["html"]}>
   <TabsRoot
     aria-label="HTML implementation"
     titles={{ 'html-horizontal': 'HTML (Horizontal)', 'html-vertical': 'HTML (Vertical)', css: 'CSS' }}