diff --git a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx
index 3cb115852..6235fdcbb 100644
--- a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx
+++ b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx
@@ -306,9 +306,16 @@ The `CodeBlocks` component allows you to display multiple code blocks in a tabbe
-## Example of Synchronized Blocks
+## Language synchronization
-Multiple `CodeBlocks` on a page automatically synchronize, showing the same language across all blocks.
+Multiple `CodeBlocks` on a documentation site automatically synchronize. This
+means when a user selects a `CodeBlock` with a specific language, all other
+`CodeBlocks` across your documentation site with the same language will
+automatically sync and switch to match. Language preferences are stored in
+client-side local storage and persist across browser sessions.
+
+The example below demonstrates language sync in action – choosing a language in
+either set of code blocks will automatically update both sets to match:
```python title="Python"
@@ -362,6 +369,10 @@ Multiple `CodeBlocks` on a page automatically synchronize, showing the same lang
```
+
+ `CodeBlocks` automatically synchronize with [`` components that have a `language` property](/docs/writing-content/components/tabs#language-synchronization).
+
+
### Override synchronization
You can override the synchronization of code blocks by setting the `for` prop.
diff --git a/fern/products/docs/pages/component-library/default-components/tabs.mdx b/fern/products/docs/pages/component-library/default-components/tabs.mdx
index 9a8293654..1290970e4 100644
--- a/fern/products/docs/pages/component-library/default-components/tabs.mdx
+++ b/fern/products/docs/pages/component-library/default-components/tabs.mdx
@@ -1,11 +1,40 @@
---
-title: 'Tabs'
-description: 'The Tabs component allows you to display related content in a tabbed view.'
+title: Tabs
+description: The Tabs component allows you to display related content in a tabbed view with support for language synchronization.
---
-The Tabs component organizes content into separate tabs that users can switch between. Each tab can contain different types of content like examples or code snippets.
+The Tabs component organizes content into separate tabs that users can switch between. Each tab can contain different types of content like examples, code snippets, or documentation sections.
+
+
+
+ ☝️ Welcome to the content that you can only see inside the first Tab.
+
+
+ ✌️ Here's content that's only inside the second Tab.
+
+
+ 💪 Here's content that's only inside the third Tab.
+
+
+
+
+```jsx
+
+
+ ☝️ Welcome to the content that you can only see inside the first Tab.
+
+
+ ✌️ Here's content that's only inside the second Tab.
+
+
+ 💪 Here's content that's only inside the third Tab.
+
+
+```
+
## Properties
+
The title displayed in the tab header
@@ -13,43 +42,147 @@ The Tabs component organizes content into separate tabs that users can switch be
The language associated with the code block. Any arbitrary string may be used.
- When a user selects a tab with a specific language, all other tabs assigned to the same language will automatically sync and switch to match. Syncs with the [`for` property of ``](/learn/docs/writing-content/components/code-blocks#override-synchronization).
+ When specified, enables global language synchronization across all tabs and code blocks with the same language value.
The content to be displayed when the tab is selected. Can include text, markdown, and components.
-
+## Language synchronization
+
+Multiple `Tabs` with a `language` property automatically synchronize. This means
+when a user selects a tab with a specific language, all other tabs across your
+documentation site with the same language will automatically sync and switch to
+match. Language preferences are stored in client-side local storage and persist
+across browser sessions.
+
+In the example below, choosing a language in either set of tabs will automatically update both sets to match:
-
- ☝️ Welcome to the content that you can only see inside the first Tab.
+
+ ```typescript
+ console.log("First code block!");
+ ```
-
- ✌️ Here's content that's only inside the second Tab.
+
+ ```python
+ print("First code block!")
+ ```
-
- 💪 Here's content that's only inside the third Tab.
+
+ ```java
+ System.out.println("First code block!");
+ ```
-
+
+ Language-enabled `Tabs` automatically synchronize with [`CodeBlocks` in that same language](/docs/writing-content/components/code-blocks#language-synchronization).
+
+
+
+
+Tabs **without** the `language` property don't stay in sync with other tabs on your site. In the below example, choosing a language in
+either set of tabs doesn't affect the other set of tabs:
+
+
+
+ ```typescript
+ console.log("First code block!");
+ ```
+
+
+ ```python
+ print("First code block!")
+ ```
+
+
+ ```java
+ System.out.println("First code block!");
+ ```
+
+
+
+
+
+ ```typescript
+ console.log("Second code block – this won't sync with the one above!");
+ ```
+
+
+ ```python
+ print("Second code block – this won't sync with the one above!")
+ ```
+
+
+ ```java
+ System.out.println("Second code block – this won't sync with the one above!");
+ ```
+
+
+
+
+````jsx
+
+
+ ```typescript
+ console.log("Content inside the TypeScript tab, with no language property");
+ ```
+
+
+ ```python
+ print("Content inside the Python tab, with no language property")
+ ```
+
+
+ ```java
+ System.out.println("Content inside the Java tab, with no language property");
+ ```
+
+
+````
+
+
+
+