From 642e6be8bc5c389de5400745f325ba0fb8f6f1c0 Mon Sep 17 00:00:00 2001
From: dks333 <kaishan333sam@gmail.com>
Date: Wed, 9 Jul 2025 14:09:41 -0700
Subject: [PATCH 1/3] add language dropdown example

---
 components/code-groups.mdx | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/components/code-groups.mdx b/components/code-groups.mdx
index 9cd3807a..1ebb4061 100644
--- a/components/code-groups.mdx
+++ b/components/code-groups.mdx
@@ -30,7 +30,7 @@ class HelloWorld {
 
 ## Language dropdown
 
-You can replace the tabs in a code group with a dropdown menu to toggle between languages.
+You can replace the tabs in a code group with a dropdown menu to toggle between languages using `dropdown` prop.
 
 <CodeGroup dropdown>
 
@@ -52,11 +52,28 @@ class HelloWorld {
 
 </CodeGroup>
 
-### Props
 
-<ResponseField name="dropdown" type="boolean">
-  Whether to show a dropdown button to toggle the code groups with languages as the options.
-</ResponseField>
+````mdx
+<CodeGroup dropdown>
+
+```javascript helloWorld.js
+console.log("Hello World");
+```
+
+```python hello_world.py
+print('Hello World!')
+```
+
+```java HelloWorld.java
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```
+</CodeGroup>
+````
+
 
 <RequestExample>
 

From 70faed59ace58fe150036455de496e1e16932ea9 Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Wed, 9 Jul 2025 14:19:09 -0700
Subject: [PATCH 2/3] copyedit

---
 components/code-groups.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/code-groups.mdx b/components/code-groups.mdx
index 1ebb4061..edd93fa1 100644
--- a/components/code-groups.mdx
+++ b/components/code-groups.mdx
@@ -30,7 +30,7 @@ class HelloWorld {
 
 ## Language dropdown
 
-You can replace the tabs in a code group with a dropdown menu to toggle between languages using `dropdown` prop.
+You can replace the tabs in a code group with a dropdown menu to toggle between languages using the `dropdown` prop.
 
 <CodeGroup dropdown>
 
@@ -53,7 +53,7 @@ class HelloWorld {
 </CodeGroup>
 
 
-````mdx
+````mdx highlight=1
 <CodeGroup dropdown>
 
 ```javascript helloWorld.js

From 1954cb3443e83713a472864e293e25212ae274b2 Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Wed, 9 Jul 2025 14:26:25 -0700
Subject: [PATCH 3/3] bring changes from #878

---
 components/code-groups.mdx | 30 +++++++++++++-----------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/components/code-groups.mdx b/components/code-groups.mdx
index edd93fa1..a4694711 100644
--- a/components/code-groups.mdx
+++ b/components/code-groups.mdx
@@ -1,12 +1,10 @@
 ---
 title: "Code groups"
-description: "The CodeGroup component lets you combine code blocks in a display separated by tabs"
+description: "Display multiple code examples in one component"
 icon: "group"
 ---
 
-You will need to make [Code Blocks](/code) then add the `<CodeGroup>` component around them. Every Code Block must have a filename because we use the names for the tab buttons.
-
-See below for an example of the end result.
+Use the `CodeGroup` component to display multiple code blocks in a tabbed interface, allowing users to compare implementations across different programming languages or see alternative approaches for the same task.
 
 <CodeGroup>
 
@@ -28,11 +26,12 @@ class HelloWorld {
 
 </CodeGroup>
 
-## Language dropdown
+## Creating code groups
 
-You can replace the tabs in a code group with a dropdown menu to toggle between languages using the `dropdown` prop.
+To create a code group, wrap multiple code blocks with `<CodeGroup>` tags. Each code block must include a title, which becomes the tab label.
 
-<CodeGroup dropdown>
+````mdx
+<CodeGroup>
 
 ```javascript helloWorld.js
 console.log("Hello World");
@@ -51,9 +50,12 @@ class HelloWorld {
 ```
 
 </CodeGroup>
+````
 
+## Language dropdown
+
+You can replace the tabs in a code group with a dropdown menu to toggle between languages using the `dropdown` prop.
 
-````mdx highlight=1
 <CodeGroup dropdown>
 
 ```javascript helloWorld.js
@@ -71,14 +73,11 @@ class HelloWorld {
     }
 }
 ```
-</CodeGroup>
-````
-
 
-<RequestExample>
+</CodeGroup>
 
-````mdx Code Group Example
-<CodeGroup>
+````mdx highlight=1
+<CodeGroup dropdown>
 
 ```javascript helloWorld.js
 console.log("Hello World");
@@ -95,8 +94,5 @@ class HelloWorld {
     }
 }
 ```
-
 </CodeGroup>
 ````
-
-</RequestExample>