chore: global group gap

segunadebayo · segunadebayo · commit 2cafb0ee474f · 2025-07-24T20:48:28.000+01:00
diff --git a/.changeset/eleven-roses-doubt.md b/.changeset/eleven-roses-doubt.md
@@ -2,17 +2,20 @@
 "@chakra-ui/react": minor
 ---
 
-Add `unstyled` prop support to compound component children to opt-out of recipe
-styles per component.
+- **System**: Add `unstyled` prop support to compound component children to
+  opt-out of recipe styles per component.
 
-```tsx
-<Accordion.Root defaultValue={["a"]}>
-  <Accordion.Item value="a">
-    {/* Opt-out of recipe styles */}
-    <Accordion.ItemTrigger unstyled bg="red.500" />
-    <Accordion.ItemContent>
-      <Accordion.ItemBody />
-    </Accordion.ItemContent>
-  </Accordion.Item>
-</Accordion.Root>
-```
+  ```tsx
+  <Accordion.Root defaultValue={["a"]}>
+    <Accordion.Item value="a">
+      {/* Opt-out of recipe styles */}
+      <Accordion.ItemTrigger unstyled bg="red.500" />
+      <Accordion.ItemContent>
+        <Accordion.ItemBody />
+      </Accordion.ItemContent>
+    </Accordion.Item>
+  </Accordion.Root>
+  ```
+
+- **Group**: Add support changing group gap globally via `--group-gap` CSS
+  variable
diff --git a/packages/react/src/components/group/group.tsx b/packages/react/src/components/group/group.tsx
@@ -19,7 +19,7 @@ import { cx, dataAttr } from "../../utils"
 const StyledGroup = chakra("div", {
   base: {
     display: "inline-flex",
-    gap: "0.5rem",
+    gap: "var(--group-gap, 0.5rem)",
     isolation: "isolate",
     position: "relative",
     "& [data-group-item]": {
