UI: Rename id prop on Tabs component to groupId

.changeset/orange-fans-roll.md

@@ -0,0 +1,9 @@
+---
+'fumadocs-ui': major
+---
+
+**Rename `id` prop on Tabs component to `groupId`**
+
+**why:** Conflicted with HTML `id` attribute.
+
+**migrate:** Rename to `groupId`.

apps/docs/content/docs/headless/mdx/install.mdx

@@ -95,7 +95,7 @@ const config = {
 This will instead generate:
 
 ```mdx
-<Tabs id="some-id" persist items={[...]}>
+<Tabs groupId="some-id" persist items={[...]}>
   ...
 <Tabs>
 ```

apps/docs/content/docs/ui/components/tabs.mdx

@@ -25,7 +25,7 @@ By passing an `id` property, you can share a value across all tabs with the same
 id.
 
 ```mdx
-<Tabs id="language" items={['Javascript', 'Rust']}>
+<Tabs groupId="language" items={['Javascript', 'Rust']}>
   <Tab value="Javascript">Javascript is weird</Tab>
   <Tab value="Rust">Rust is fast</Tab>
 </Tabs>
@@ -37,7 +37,7 @@ You can enable persistent by passing a `persist` property. The value will be
 stored in `localStorage`, with its id as the key.
 
 ```mdx
-<Tabs id="language" items={['Javascript', 'Rust']} persist>
+<Tabs groupId="language" items={['Javascript', 'Rust']} persist>
   <Tab value="Javascript">Javascript is weird</Tab>
   <Tab value="Rust">Rust is fast</Tab>
 </Tabs>

apps/docs/content/docs/ui/index.mdx

@@ -28,7 +28,7 @@ You might need to be familiar with Next.js App Router to continue.
 
 Create a new app with `create-fumadocs-app`, it requires Node.js 18+.
 
-<Tabs id='package-manager' persist items={['npm', 'pnpm', 'yarn', 'bun']}>
+<Tabs groupId='package-manager' persist items={['npm', 'pnpm', 'yarn', 'bun']}>
 
 ```bash tab="npm"
 npx create-fumadocs-app

apps/docs/content/docs/ui/manual-installation.mdx

@@ -100,7 +100,7 @@ For the `page.tsx`, it may vary depending on your source. You should configure s
 
 Wrap your content in the [Page](/docs/ui/blocks/page) component.
 
-<Tabs id='content-source' items={['Fumadocs MDX', 'Content Collections']}>
+<Tabs groupId='content-source' items={['Fumadocs MDX', 'Content Collections']}>
 
 ```json doc-gen:file
 {
@@ -126,7 +126,7 @@ Wrap your content in the [Page](/docs/ui/blocks/page) component.
 
 Use the default document search based on Flexsearch.
 
-<Tabs id='content-source' items={['Fumadocs MDX', 'Content Collections']}>
+<Tabs groupId='content-source' items={['Fumadocs MDX', 'Content Collections']}>
 
 ```json doc-gen:file
 {

packages/doc-gen/src/remark-install.ts

@@ -68,7 +68,7 @@ export function remarkInstall({
             ? [
                 {
                   type: 'mdxJsxAttribute',
-                  name: 'id',
+                  name: 'groupId',
                   value: persist.id,
                 },
                 {

packages/ui/src/components/tabs.tsx

@@ -37,11 +37,11 @@ function update(id: string, v: string, persist: boolean): void {
 }
 
 export interface TabsProps extends BaseProps {
-  // TODO: Rename to group id so that it won't confuse with HTML `id` attribute (next major)
   /**
    * Identifier for Sharing value of tabs
    */
-  id?: string;
+  groupId?: string;
+
   /**
    * Enable persistent
    */
@@ -55,7 +55,7 @@ export interface TabsProps extends BaseProps {
 }
 
 export function Tabs({
-  id,
+  groupId,
   items = [],
   persist = false,
   defaultIndex = 0,
@@ -65,32 +65,32 @@ export function Tabs({
   const [value, setValue] = useState(values[defaultIndex]);
 
   useLayoutEffect(() => {
-    if (!id) return;
+    if (!groupId) return;
 
     const onUpdate: ChangeListener = (v) => {
       if (values.includes(v)) setValue(v);
     };
 
     const previous = persist
-      ? localStorage.getItem(id)
-      : sessionStorage.getItem(id);
+      ? localStorage.getItem(groupId)
+      : sessionStorage.getItem(groupId);
 
     if (previous) onUpdate(previous);
-    addChangeListener(id, onUpdate);
+    addChangeListener(groupId, onUpdate);
     return () => {
-      removeChangeListener(id, onUpdate);
+      removeChangeListener(groupId, onUpdate);
     };
-  }, [id, persist, values]);
+  }, [groupId, persist, values]);
 
   const onValueChange = useCallback(
     (v: string) => {
-      if (id) {
-        update(id, v, persist);
+      if (groupId) {
+        update(groupId, v, persist);
       } else {
         setValue(v);
       }
     },
-    [id, persist],
+    [groupId, persist],
   );
 
   return (