diff --git a/apps/docs/content/docs/components/tabs.mdx b/apps/docs/content/docs/components/tabs.mdx
index 8b8f339e3e..c88f998b56 100644
--- a/apps/docs/content/docs/components/tabs.mdx
+++ b/apps/docs/content/docs/components/tabs.mdx
@@ -169,10 +169,10 @@ function AppTabs() {
   return (
     <div className="flex flex-col gap-2">
       <Tabs selectedKey={pathname} aria-label="Tabs">
-        <Tab id="/" href="/" title="Home" />
-        <Tab id="/photos" href="/photos" title="Photos" />
-        <Tab id="/music" href="/music" title="Music" />
-        <Tab id="/videos" href="/videos" title="Videos" />
+        <Tab key="/" href="/" title="Home" />
+        <Tab key="/photos" href="/photos" title="Photos" />
+        <Tab key="/music" href="/music" title="Music" />
+        <Tab key="/videos" href="/videos" title="Videos" />
       </Tabs>
       <Routes>
         <Route path="/" element={<HomePage />} />
@@ -356,7 +356,7 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to
     },
     {
       attribute: "isVertical",
-      type: "boolean", 
+      type: "boolean",
       description: "Whether the tabs are vertical.",
       default: "false"
     },