diff --git a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
index fad2c5bd2a..f9f30f55fd 100644
--- a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
@@ -149,8 +149,12 @@ export default async function Page(props: {
               )}
             </div>
             {params.slug?.[0] === "components" &&
-              (params.slug?.[1] === "radix" || params.slug?.[1] === "base") && (
-                <DocsBaseSwitcher />
+              (params.slug?.[1] === "radix" || params.slug?.[1] === "base") &&
+              params.slug?.[2] && (
+                <DocsBaseSwitcher
+                  base={params.slug[1]}
+                  component={params.slug[2]}
+                />
               )}
             {links ? (
               <div className="flex items-center gap-2 pt-4">
diff --git a/apps/v4/components/docs-base-switcher.tsx b/apps/v4/components/docs-base-switcher.tsx
index b3e5d3ee71..d1c21f712c 100644
--- a/apps/v4/components/docs-base-switcher.tsx
+++ b/apps/v4/components/docs-base-switcher.tsx
@@ -1,38 +1,29 @@
-"use client"
-
 import Link from "next/link"
-import { usePathname } from "next/navigation"
 
 import { cn } from "@/lib/utils"
+import { BASES } from "@/registry/bases"
 
-const BASES = [
-  { name: "radix", label: "Radix UI" },
-  { name: "base", label: "Base UI" },
-]
-
-export function DocsBaseSwitcher() {
-  const pathname = usePathname()
-
-  // Extract base and component from /docs/components/{base}/{component}.
-  const match = pathname.match(/\/docs\/components\/(radix|base)\/(.+)/)
-  if (!match) return null
-
-  const [, currentBase, component] = match
-
+export function DocsBaseSwitcher({
+  base,
+  component,
+}: {
+  base: string
+  component: string
+}) {
   return (
     <div className="flex gap-1 rounded-md border p-1">
-      {BASES.map((base) => (
+      {BASES.map((baseItem) => (
         <Link
-          key={base.name}
-          href={`/docs/components/${base.name}/${component}`}
+          key={baseItem.name}
+          href={`/docs/components/${baseItem.name}/${component}`}
           className={cn(
             "rounded px-3 py-1 text-sm transition-colors",
-            currentBase === base.name
+            base === baseItem.name
               ? "bg-primary text-primary-foreground"
               : "hover:bg-muted"
           )}
         >
-          {base.label}
+          {baseItem.title}
         </Link>
       ))}
     </div>
diff --git a/apps/v4/components/mobile-nav.tsx b/apps/v4/components/mobile-nav.tsx
index c9f425d057..50c70ab7f4 100644
--- a/apps/v4/components/mobile-nav.tsx
+++ b/apps/v4/components/mobile-nav.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import Link, { type LinkProps } from "next/link"
-import { useRouter } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 
 import { PAGES_NEW } from "@/lib/docs"
 import { showMcpDocs } from "@/lib/flags"
@@ -19,7 +19,7 @@ const TOP_LEVEL_SECTIONS = [
   { name: "Get Started", href: "/docs" },
   {
     name: "Components",
-    href: "/docs/components",
+    href: "/docs/components/radix",
   },
   {
     name: "Directory",
@@ -39,6 +39,61 @@ const TOP_LEVEL_SECTIONS = [
   },
 ]
 
+type PageTreeNode = (typeof source.pageTree)["children"][number]
+type PageTreeFolder = Extract<PageTreeNode, { type: "folder" }>
+type PageTreePage = Extract<PageTreeNode, { type: "page" }>
+
+// Recursively find all pages in a folder tree.
+function getAllPagesFromFolder(folder: PageTreeFolder): PageTreePage[] {
+  const pages: PageTreePage[] = []
+
+  for (const child of folder.children) {
+    if (child.type === "page") {
+      pages.push(child)
+    } else if (child.type === "folder") {
+      pages.push(...getAllPagesFromFolder(child))
+    }
+  }
+
+  return pages
+}
+
+// Get the pages from a folder, handling nested base folders (radix/base).
+function getPagesFromFolder(
+  folder: PageTreeFolder,
+  currentBase: string
+): PageTreePage[] {
+  // For the components folder, find the base subfolder.
+  if (folder.$id === "components" || folder.name === "Components") {
+    for (const child of folder.children) {
+      if (child.type === "folder") {
+        // Match by $id or by name.
+        const isRadix = child.$id === "radix" || child.name === "Radix UI"
+        const isBase = child.$id === "base" || child.name === "Base UI"
+
+        if (
+          (currentBase === "radix" && isRadix) ||
+          (currentBase === "base" && isBase)
+        ) {
+          return child.children.filter(
+            (c): c is PageTreePage => c.type === "page"
+          )
+        }
+      }
+    }
+
+    // Fallback: return all pages from nested folders.
+    return getAllPagesFromFolder(folder).filter(
+      (page) => !page.url.endsWith("/components")
+    )
+  }
+
+  // For other folders, return direct page children.
+  return folder.children.filter(
+    (child): child is PageTreePage => child.type === "page"
+  )
+}
+
 export function MobileNav({
   tree,
   items,
@@ -49,6 +104,12 @@ export function MobileNav({
   className?: string
 }) {
   const [open, setOpen] = React.useState(false)
+  const pathname = usePathname()
+
+  // Determine current base from pathname.
+  const currentBase = pathname.includes("/docs/components/base/")
+    ? "base"
+    : "radix"
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -125,31 +186,30 @@ export function MobileNav({
           <div className="flex flex-col gap-8">
             {tree?.children?.map((group, index) => {
               if (group.type === "folder") {
+                const pages = getPagesFromFolder(group, currentBase)
                 return (
                   <div key={index} className="flex flex-col gap-4">
                     <div className="text-muted-foreground text-sm font-medium">
                       {group.name}
                     </div>
                     <div className="flex flex-col gap-3">
-                      {group.children.map((item) => {
-                        if (item.type === "page") {
-                          if (!showMcpDocs && item.url.includes("/mcp")) {
-                            return null
-                          }
-                          return (
-                            <MobileLink
-                              key={`${item.url}-${index}`}
-                              href={item.url}
-                              onOpenChange={setOpen}
-                              className="flex items-center gap-2"
-                            >
-                              {item.name}{" "}
-                              {PAGES_NEW.includes(item.url) && (
-                                <span className="flex size-2 rounded-full bg-blue-500" />
-                              )}
-                            </MobileLink>
-                          )
+                      {pages.map((item) => {
+                        if (!showMcpDocs && item.url.includes("/mcp")) {
+                          return null
                         }
+                        return (
+                          <MobileLink
+                            key={`${item.url}-${index}`}
+                            href={item.url}
+                            onOpenChange={setOpen}
+                            className="flex items-center gap-2"
+                          >
+                            {item.name}{" "}
+                            {PAGES_NEW.includes(item.url) && (
+                              <span className="flex size-2 rounded-full bg-blue-500" />
+                            )}
+                          </MobileLink>
+                        )
                       })}
                     </div>
                   </div>
diff --git a/apps/v4/content/docs/components/base/accordion.mdx b/apps/v4/content/docs/components/base/accordion.mdx
index dba2d460c9..0f7c6ca323 100644
--- a/apps/v4/content/docs/components/base/accordion.mdx
+++ b/apps/v4/content/docs/components/base/accordion.mdx
@@ -40,7 +40,7 @@ npx shadcn@latest add accordion
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-accordion
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/alert-dialog.mdx b/apps/v4/content/docs/components/base/alert-dialog.mdx
index 56ef5541a5..f651c103a8 100644
--- a/apps/v4/content/docs/components/base/alert-dialog.mdx
+++ b/apps/v4/content/docs/components/base/alert-dialog.mdx
@@ -39,7 +39,7 @@ npx shadcn@latest add alert-dialog
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-alert-dialog
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/aspect-ratio.mdx b/apps/v4/content/docs/components/base/aspect-ratio.mdx
index cb5ffd7399..e6209b4ee6 100644
--- a/apps/v4/content/docs/components/base/aspect-ratio.mdx
+++ b/apps/v4/content/docs/components/base/aspect-ratio.mdx
@@ -38,7 +38,7 @@ npx shadcn@latest add aspect-ratio
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-aspect-ratio
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/avatar.mdx b/apps/v4/content/docs/components/base/avatar.mdx
index 88d9cc100f..967c374fea 100644
--- a/apps/v4/content/docs/components/base/avatar.mdx
+++ b/apps/v4/content/docs/components/base/avatar.mdx
@@ -38,7 +38,7 @@ npx shadcn@latest add avatar
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-avatar
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/button-group.mdx b/apps/v4/content/docs/components/base/button-group.mdx
index 90f6c80b05..db11b93f01 100644
--- a/apps/v4/content/docs/components/base/button-group.mdx
+++ b/apps/v4/content/docs/components/base/button-group.mdx
@@ -30,7 +30,7 @@ npx shadcn@latest add button-group
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-slot
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/button.mdx b/apps/v4/content/docs/components/base/button.mdx
index 4943f9b98b..518fa070cf 100644
--- a/apps/v4/content/docs/components/base/button.mdx
+++ b/apps/v4/content/docs/components/base/button.mdx
@@ -52,7 +52,7 @@ npx shadcn@latest add button
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-slot
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/checkbox.mdx b/apps/v4/content/docs/components/base/checkbox.mdx
index e5c3f67b3f..8f0e86cb68 100644
--- a/apps/v4/content/docs/components/base/checkbox.mdx
+++ b/apps/v4/content/docs/components/base/checkbox.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add checkbox
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-checkbox
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/collapsible.mdx b/apps/v4/content/docs/components/base/collapsible.mdx
index aa5daa519e..d8b4a11856 100644
--- a/apps/v4/content/docs/components/base/collapsible.mdx
+++ b/apps/v4/content/docs/components/base/collapsible.mdx
@@ -38,7 +38,7 @@ npx shadcn@latest add collapsible
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-collapsible
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/context-menu.mdx b/apps/v4/content/docs/components/base/context-menu.mdx
index 92ff5dbd6e..fe8e6bc4e4 100644
--- a/apps/v4/content/docs/components/base/context-menu.mdx
+++ b/apps/v4/content/docs/components/base/context-menu.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add context-menu
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-context-menu
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/dialog.mdx b/apps/v4/content/docs/components/base/dialog.mdx
index bcc2331cb3..7f6b3053c1 100644
--- a/apps/v4/content/docs/components/base/dialog.mdx
+++ b/apps/v4/content/docs/components/base/dialog.mdx
@@ -38,7 +38,7 @@ npx shadcn@latest add dialog
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-dialog
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/dropdown-menu.mdx b/apps/v4/content/docs/components/base/dropdown-menu.mdx
index 489f6350ce..35019a2afb 100644
--- a/apps/v4/content/docs/components/base/dropdown-menu.mdx
+++ b/apps/v4/content/docs/components/base/dropdown-menu.mdx
@@ -38,7 +38,7 @@ npx shadcn@latest add dropdown-menu
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-dropdown-menu
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/form.mdx b/apps/v4/content/docs/components/base/form.mdx
deleted file mode 100644
index 3a8d903e7c..0000000000
--- a/apps/v4/content/docs/components/base/form.mdx
+++ /dev/null
@@ -1,245 +0,0 @@
----
-title: Form
-description: Building forms with React Hook Form and Zod.
-links:
-  doc: https://react-hook-form.com
----
-
-import { InfoIcon } from "lucide-react"
-
-<Callout icon={<InfoIcon />} title="We are not actively developing this component anymore.">
-
-The Form component is an abstraction over the `react-hook-form` library. Going forward, we recommend using the [`<Field />`](/docs/components/field) component to build forms. See the [Form](/docs/forms) documentation for more information.
-
-</Callout>
-
-Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex.
-
-Well-designed HTML forms are:
-
-- Well-structured and semantically correct.
-- Easy to use and navigate (keyboard).
-- Accessible with ARIA attributes and proper labels.
-- Has support for client and server side validation.
-- Well-styled and consistent with the rest of the application.
-
-In this guide, we will take a look at building forms with [`react-hook-form`](https://react-hook-form.com/) and [`zod`](https://zod.dev). We're going to use a `<FormField>` component to compose accessible forms using Radix UI components.
-
-## Features
-
-The `<Form />` component is a wrapper around the `react-hook-form` library. It provides a few things:
-
-- Composable components for building forms.
-- A `<FormField />` component for building controlled form fields.
-- Form validation using `zod`.
-- Handles accessibility and error messages.
-- Uses `React.useId()` for generating unique IDs.
-- Applies the correct `aria` attributes to form fields based on states.
-- Built to work with all Radix UI components.
-- Bring your own schema library. We use `zod` but you can use anything you want.
-- **You have full control over the markup and styling.**
-
-## Anatomy
-
-```tsx showLineNumbers
-<Form>
-  <FormField
-    control={...}
-    name="..."
-    render={() => (
-      <FormItem>
-        <FormLabel />
-        <FormControl>
-          { /* Your form field */}
-        </FormControl>
-        <FormDescription />
-        <FormMessage />
-      </FormItem>
-    )}
-  />
-</Form>
-```
-
-## Example
-
-```tsx showLineNumbers
-const form = useForm()
-
-<FormField
-  control={form.control}
-  name="username"
-  render={({ field }) => (
-    <FormItem>
-      <FormLabel>Username</FormLabel>
-      <FormControl>
-        <Input placeholder="shadcn" {...field} />
-      </FormControl>
-      <FormDescription>This is your public display name.</FormDescription>
-      <FormMessage />
-    </FormItem>
-  )}
-/>
-```
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-<Steps>
-
-### Command
-
-```bash
-npx shadcn@latest add form
-```
-
-</Steps>
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps>
-
-<Step>Install the following dependencies:</Step>
-
-```bash
-npm install @radix-ui/react-label @radix-ui/react-slot react-hook-form @hookform/resolvers zod
-```
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource
-  name="form"
-  title="components/ui/form.tsx"
-  styleName="base-nova"
-/>
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-### Create a form schema
-
-Define the shape of your form using a Zod schema. You can read more about using Zod in the [Zod documentation](https://zod.dev).
-
-```tsx showLineNumbers title="components/example-form.tsx" {3,5-7}
-"use client"
-
-import { z } from "zod"
-
-const formSchema = z.object({
-  username: z.string().min(2).max(50),
-})
-```
-
-### Define a form
-
-Use the `useForm` hook from `react-hook-form` to create a form.
-
-```tsx showLineNumbers title="components/example-form.tsx" {3-4,14-20,22-27}
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-const formSchema = z.object({
-  username: z.string().min(2, {
-    message: "Username must be at least 2 characters.",
-  }),
-})
-
-export function ProfileForm() {
-  // 1. Define your form.
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      username: "",
-    },
-  })
-
-  // 2. Define a submit handler.
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    // Do something with the form values.
-    // ✅ This will be type-safe and validated.
-    console.log(values)
-  }
-}
-```
-
-Since `FormField` is using a controlled component, you need to provide a default value for the field. See the [React Hook Form docs](https://react-hook-form.com/docs/usecontroller) to learn more about controlled components.
-
-### Build your form
-
-We can now use the `<Form />` components to build our form.
-
-```tsx showLineNumbers title="components/example-form.tsx" {7-17,28-50}
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { Button } from "@/components/ui/button"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-
-const formSchema = z.object({
-  username: z.string().min(2, {
-    message: "Username must be at least 2 characters.",
-  }),
-})
-
-export function ProfileForm() {
-  // ...
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <Input placeholder="shadcn" {...field} />
-              </FormControl>
-              <FormDescription>
-                This is your public display name.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}
-```
-
-### Done
-
-That's it. You now have a fully accessible form that is type-safe with client-side validation.
diff --git a/apps/v4/content/docs/components/base/hover-card.mdx b/apps/v4/content/docs/components/base/hover-card.mdx
index 448c49e760..1234d5215f 100644
--- a/apps/v4/content/docs/components/base/hover-card.mdx
+++ b/apps/v4/content/docs/components/base/hover-card.mdx
@@ -35,7 +35,7 @@ npx shadcn@latest add hover-card
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-hover-card
+npm install @base-ui/react
 ```
 
 <Steps>
diff --git a/apps/v4/content/docs/components/base/label.mdx b/apps/v4/content/docs/components/base/label.mdx
index de83018cff..314b7be6f9 100644
--- a/apps/v4/content/docs/components/base/label.mdx
+++ b/apps/v4/content/docs/components/base/label.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add label
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-label
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/menubar.mdx b/apps/v4/content/docs/components/base/menubar.mdx
index aab7a7fb18..0f75bf2759 100644
--- a/apps/v4/content/docs/components/base/menubar.mdx
+++ b/apps/v4/content/docs/components/base/menubar.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add menubar
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-menubar
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/navigation-menu.mdx b/apps/v4/content/docs/components/base/navigation-menu.mdx
index affd8d0b2b..9deff87027 100644
--- a/apps/v4/content/docs/components/base/navigation-menu.mdx
+++ b/apps/v4/content/docs/components/base/navigation-menu.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add navigation-menu
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-navigation-menu
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/popover.mdx b/apps/v4/content/docs/components/base/popover.mdx
index 67ad1b1da1..20cacd6e10 100644
--- a/apps/v4/content/docs/components/base/popover.mdx
+++ b/apps/v4/content/docs/components/base/popover.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add popover
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-popover
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/progress.mdx b/apps/v4/content/docs/components/base/progress.mdx
index df3ede6f93..63252e17a7 100644
--- a/apps/v4/content/docs/components/base/progress.mdx
+++ b/apps/v4/content/docs/components/base/progress.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add progress
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-progress
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/radio-group.mdx b/apps/v4/content/docs/components/base/radio-group.mdx
index 3043cbe58f..7d4f1b5f19 100644
--- a/apps/v4/content/docs/components/base/radio-group.mdx
+++ b/apps/v4/content/docs/components/base/radio-group.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add radio-group
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-radio-group
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/scroll-area.mdx b/apps/v4/content/docs/components/base/scroll-area.mdx
index 449e342214..49d4f9a1d0 100644
--- a/apps/v4/content/docs/components/base/scroll-area.mdx
+++ b/apps/v4/content/docs/components/base/scroll-area.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add scroll-area
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-scroll-area
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/select.mdx b/apps/v4/content/docs/components/base/select.mdx
index 9fb1ce004d..4f283d9f4a 100644
--- a/apps/v4/content/docs/components/base/select.mdx
+++ b/apps/v4/content/docs/components/base/select.mdx
@@ -38,7 +38,7 @@ npx shadcn@latest add select
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-select
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/separator.mdx b/apps/v4/content/docs/components/base/separator.mdx
index ee0696d80f..bffc449063 100644
--- a/apps/v4/content/docs/components/base/separator.mdx
+++ b/apps/v4/content/docs/components/base/separator.mdx
@@ -36,7 +36,7 @@ npx shadcn@latest add separator
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-separator
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/sheet.mdx b/apps/v4/content/docs/components/base/sheet.mdx
index 27eef4199b..cb3af896cd 100644
--- a/apps/v4/content/docs/components/base/sheet.mdx
+++ b/apps/v4/content/docs/components/base/sheet.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add sheet
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-dialog
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/slider.mdx b/apps/v4/content/docs/components/base/slider.mdx
index 32bb336ecb..3fd419b2b7 100644
--- a/apps/v4/content/docs/components/base/slider.mdx
+++ b/apps/v4/content/docs/components/base/slider.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add slider
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-slider
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/switch.mdx b/apps/v4/content/docs/components/base/switch.mdx
index b78eed1af2..4f4e4ef571 100644
--- a/apps/v4/content/docs/components/base/switch.mdx
+++ b/apps/v4/content/docs/components/base/switch.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add switch
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-switch
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/tabs.mdx b/apps/v4/content/docs/components/base/tabs.mdx
index d3d95f6e52..d53678bb41 100644
--- a/apps/v4/content/docs/components/base/tabs.mdx
+++ b/apps/v4/content/docs/components/base/tabs.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add tabs
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-tabs
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/toggle-group.mdx b/apps/v4/content/docs/components/base/toggle-group.mdx
index 3ebff1df5d..8ddb15bf51 100644
--- a/apps/v4/content/docs/components/base/toggle-group.mdx
+++ b/apps/v4/content/docs/components/base/toggle-group.mdx
@@ -33,7 +33,7 @@ npx shadcn@latest add toggle-group
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-toggle-group
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/toggle.mdx b/apps/v4/content/docs/components/base/toggle.mdx
index 0a4915bd26..a1e32cf81d 100644
--- a/apps/v4/content/docs/components/base/toggle.mdx
+++ b/apps/v4/content/docs/components/base/toggle.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add toggle
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-toggle
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/base/tooltip.mdx b/apps/v4/content/docs/components/base/tooltip.mdx
index 17b4b43899..5f758ca2da 100644
--- a/apps/v4/content/docs/components/base/tooltip.mdx
+++ b/apps/v4/content/docs/components/base/tooltip.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add tooltip
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-tooltip
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/accordion.mdx b/apps/v4/content/docs/components/radix/accordion.mdx
index f2f4bfac00..a7129843e7 100644
--- a/apps/v4/content/docs/components/radix/accordion.mdx
+++ b/apps/v4/content/docs/components/radix/accordion.mdx
@@ -40,7 +40,7 @@ npx shadcn@latest add accordion
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-accordion
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/alert-dialog.mdx b/apps/v4/content/docs/components/radix/alert-dialog.mdx
index 5b8aec504c..c71efb52d4 100644
--- a/apps/v4/content/docs/components/radix/alert-dialog.mdx
+++ b/apps/v4/content/docs/components/radix/alert-dialog.mdx
@@ -39,7 +39,7 @@ npx shadcn@latest add alert-dialog
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-alert-dialog
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/aspect-ratio.mdx b/apps/v4/content/docs/components/radix/aspect-ratio.mdx
index a246d3a9f2..88b77daa6e 100644
--- a/apps/v4/content/docs/components/radix/aspect-ratio.mdx
+++ b/apps/v4/content/docs/components/radix/aspect-ratio.mdx
@@ -38,7 +38,7 @@ npx shadcn@latest add aspect-ratio
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-aspect-ratio
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/avatar.mdx b/apps/v4/content/docs/components/radix/avatar.mdx
index 10e3f25be6..8d2199f858 100644
--- a/apps/v4/content/docs/components/radix/avatar.mdx
+++ b/apps/v4/content/docs/components/radix/avatar.mdx
@@ -38,7 +38,7 @@ npx shadcn@latest add avatar
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-avatar
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/button-group.mdx b/apps/v4/content/docs/components/radix/button-group.mdx
index ab1c40e575..310264021c 100644
--- a/apps/v4/content/docs/components/radix/button-group.mdx
+++ b/apps/v4/content/docs/components/radix/button-group.mdx
@@ -30,7 +30,7 @@ npx shadcn@latest add button-group
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-slot
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/button.mdx b/apps/v4/content/docs/components/radix/button.mdx
index 191a826abc..9020db5aa0 100644
--- a/apps/v4/content/docs/components/radix/button.mdx
+++ b/apps/v4/content/docs/components/radix/button.mdx
@@ -52,7 +52,7 @@ npx shadcn@latest add button
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-slot
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/checkbox.mdx b/apps/v4/content/docs/components/radix/checkbox.mdx
index 86fcbf7541..e0fff4eeda 100644
--- a/apps/v4/content/docs/components/radix/checkbox.mdx
+++ b/apps/v4/content/docs/components/radix/checkbox.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add checkbox
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-checkbox
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/collapsible.mdx b/apps/v4/content/docs/components/radix/collapsible.mdx
index 3aa45b5e6d..f647a3e6f2 100644
--- a/apps/v4/content/docs/components/radix/collapsible.mdx
+++ b/apps/v4/content/docs/components/radix/collapsible.mdx
@@ -38,7 +38,7 @@ npx shadcn@latest add collapsible
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-collapsible
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/context-menu.mdx b/apps/v4/content/docs/components/radix/context-menu.mdx
index 1fd2b478cb..e443b6890b 100644
--- a/apps/v4/content/docs/components/radix/context-menu.mdx
+++ b/apps/v4/content/docs/components/radix/context-menu.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add context-menu
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-context-menu
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/dialog.mdx b/apps/v4/content/docs/components/radix/dialog.mdx
index 118297eaf8..e24cda2830 100644
--- a/apps/v4/content/docs/components/radix/dialog.mdx
+++ b/apps/v4/content/docs/components/radix/dialog.mdx
@@ -38,7 +38,7 @@ npx shadcn@latest add dialog
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-dialog
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/dropdown-menu.mdx b/apps/v4/content/docs/components/radix/dropdown-menu.mdx
index dfc656ee8b..d643acf3c2 100644
--- a/apps/v4/content/docs/components/radix/dropdown-menu.mdx
+++ b/apps/v4/content/docs/components/radix/dropdown-menu.mdx
@@ -38,7 +38,7 @@ npx shadcn@latest add dropdown-menu
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-dropdown-menu
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/form.mdx b/apps/v4/content/docs/components/radix/form.mdx
deleted file mode 100644
index 9209a2803e..0000000000
--- a/apps/v4/content/docs/components/radix/form.mdx
+++ /dev/null
@@ -1,245 +0,0 @@
----
-title: Form
-description: Building forms with React Hook Form and Zod.
-links:
-  doc: https://react-hook-form.com
----
-
-import { InfoIcon } from "lucide-react"
-
-<Callout icon={<InfoIcon />} title="We are not actively developing this component anymore.">
-
-The Form component is an abstraction over the `react-hook-form` library. Going forward, we recommend using the [`<Field />`](/docs/components/field) component to build forms. See the [Form](/docs/forms) documentation for more information.
-
-</Callout>
-
-Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex.
-
-Well-designed HTML forms are:
-
-- Well-structured and semantically correct.
-- Easy to use and navigate (keyboard).
-- Accessible with ARIA attributes and proper labels.
-- Has support for client and server side validation.
-- Well-styled and consistent with the rest of the application.
-
-In this guide, we will take a look at building forms with [`react-hook-form`](https://react-hook-form.com/) and [`zod`](https://zod.dev). We're going to use a `<FormField>` component to compose accessible forms using Radix UI components.
-
-## Features
-
-The `<Form />` component is a wrapper around the `react-hook-form` library. It provides a few things:
-
-- Composable components for building forms.
-- A `<FormField />` component for building controlled form fields.
-- Form validation using `zod`.
-- Handles accessibility and error messages.
-- Uses `React.useId()` for generating unique IDs.
-- Applies the correct `aria` attributes to form fields based on states.
-- Built to work with all Radix UI components.
-- Bring your own schema library. We use `zod` but you can use anything you want.
-- **You have full control over the markup and styling.**
-
-## Anatomy
-
-```tsx showLineNumbers
-<Form>
-  <FormField
-    control={...}
-    name="..."
-    render={() => (
-      <FormItem>
-        <FormLabel />
-        <FormControl>
-          { /* Your form field */}
-        </FormControl>
-        <FormDescription />
-        <FormMessage />
-      </FormItem>
-    )}
-  />
-</Form>
-```
-
-## Example
-
-```tsx showLineNumbers
-const form = useForm()
-
-<FormField
-  control={form.control}
-  name="username"
-  render={({ field }) => (
-    <FormItem>
-      <FormLabel>Username</FormLabel>
-      <FormControl>
-        <Input placeholder="shadcn" {...field} />
-      </FormControl>
-      <FormDescription>This is your public display name.</FormDescription>
-      <FormMessage />
-    </FormItem>
-  )}
-/>
-```
-
-## Installation
-
-<CodeTabs>
-
-<TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-<Steps>
-
-### Command
-
-```bash
-npx shadcn@latest add form
-```
-
-</Steps>
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps>
-
-<Step>Install the following dependencies:</Step>
-
-```bash
-npm install @radix-ui/react-label @radix-ui/react-slot react-hook-form @hookform/resolvers zod
-```
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource
-  name="form"
-  title="components/ui/form.tsx"
-  styleName="radix-nova"
-/>
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</CodeTabs>
-
-## Usage
-
-### Create a form schema
-
-Define the shape of your form using a Zod schema. You can read more about using Zod in the [Zod documentation](https://zod.dev).
-
-```tsx showLineNumbers title="components/example-form.tsx" {3,5-7}
-"use client"
-
-import { z } from "zod"
-
-const formSchema = z.object({
-  username: z.string().min(2).max(50),
-})
-```
-
-### Define a form
-
-Use the `useForm` hook from `react-hook-form` to create a form.
-
-```tsx showLineNumbers title="components/example-form.tsx" {3-4,14-20,22-27}
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-const formSchema = z.object({
-  username: z.string().min(2, {
-    message: "Username must be at least 2 characters.",
-  }),
-})
-
-export function ProfileForm() {
-  // 1. Define your form.
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      username: "",
-    },
-  })
-
-  // 2. Define a submit handler.
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    // Do something with the form values.
-    // ✅ This will be type-safe and validated.
-    console.log(values)
-  }
-}
-```
-
-Since `FormField` is using a controlled component, you need to provide a default value for the field. See the [React Hook Form docs](https://react-hook-form.com/docs/usecontroller) to learn more about controlled components.
-
-### Build your form
-
-We can now use the `<Form />` components to build our form.
-
-```tsx showLineNumbers title="components/example-form.tsx" {7-17,28-50}
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { Button } from "@/components/ui/button"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-
-const formSchema = z.object({
-  username: z.string().min(2, {
-    message: "Username must be at least 2 characters.",
-  }),
-})
-
-export function ProfileForm() {
-  // ...
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <Input placeholder="shadcn" {...field} />
-              </FormControl>
-              <FormDescription>
-                This is your public display name.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}
-```
-
-### Done
-
-That's it. You now have a fully accessible form that is type-safe with client-side validation.
diff --git a/apps/v4/content/docs/components/radix/hover-card.mdx b/apps/v4/content/docs/components/radix/hover-card.mdx
index fb49de8e53..9b1ff26296 100644
--- a/apps/v4/content/docs/components/radix/hover-card.mdx
+++ b/apps/v4/content/docs/components/radix/hover-card.mdx
@@ -35,7 +35,7 @@ npx shadcn@latest add hover-card
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-hover-card
+npm install radix-ui
 ```
 
 <Steps>
diff --git a/apps/v4/content/docs/components/radix/label.mdx b/apps/v4/content/docs/components/radix/label.mdx
index e57e21a6ed..92d510a7cc 100644
--- a/apps/v4/content/docs/components/radix/label.mdx
+++ b/apps/v4/content/docs/components/radix/label.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add label
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-label
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/menubar.mdx b/apps/v4/content/docs/components/radix/menubar.mdx
index 6ac6d15f57..36a8814066 100644
--- a/apps/v4/content/docs/components/radix/menubar.mdx
+++ b/apps/v4/content/docs/components/radix/menubar.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add menubar
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-menubar
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/navigation-menu.mdx b/apps/v4/content/docs/components/radix/navigation-menu.mdx
index 7855b5338b..6ed9961f27 100644
--- a/apps/v4/content/docs/components/radix/navigation-menu.mdx
+++ b/apps/v4/content/docs/components/radix/navigation-menu.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add navigation-menu
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-navigation-menu
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/popover.mdx b/apps/v4/content/docs/components/radix/popover.mdx
index 95a933c054..276f0f5643 100644
--- a/apps/v4/content/docs/components/radix/popover.mdx
+++ b/apps/v4/content/docs/components/radix/popover.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add popover
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-popover
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/progress.mdx b/apps/v4/content/docs/components/radix/progress.mdx
index f68f7292b4..61780e81aa 100644
--- a/apps/v4/content/docs/components/radix/progress.mdx
+++ b/apps/v4/content/docs/components/radix/progress.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add progress
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-progress
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/radio-group.mdx b/apps/v4/content/docs/components/radix/radio-group.mdx
index dcc7ebca5e..11a03dce42 100644
--- a/apps/v4/content/docs/components/radix/radio-group.mdx
+++ b/apps/v4/content/docs/components/radix/radio-group.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add radio-group
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-radio-group
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/scroll-area.mdx b/apps/v4/content/docs/components/radix/scroll-area.mdx
index 8c0069aba0..117a3ab83d 100644
--- a/apps/v4/content/docs/components/radix/scroll-area.mdx
+++ b/apps/v4/content/docs/components/radix/scroll-area.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add scroll-area
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-scroll-area
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/select.mdx b/apps/v4/content/docs/components/radix/select.mdx
index b17a159791..58c65d42bf 100644
--- a/apps/v4/content/docs/components/radix/select.mdx
+++ b/apps/v4/content/docs/components/radix/select.mdx
@@ -38,7 +38,7 @@ npx shadcn@latest add select
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-select
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/separator.mdx b/apps/v4/content/docs/components/radix/separator.mdx
index b590f8cbd3..a874ecc0d4 100644
--- a/apps/v4/content/docs/components/radix/separator.mdx
+++ b/apps/v4/content/docs/components/radix/separator.mdx
@@ -36,7 +36,7 @@ npx shadcn@latest add separator
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-separator
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/sheet.mdx b/apps/v4/content/docs/components/radix/sheet.mdx
index b9796f0dc7..10ad2c8f9a 100644
--- a/apps/v4/content/docs/components/radix/sheet.mdx
+++ b/apps/v4/content/docs/components/radix/sheet.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add sheet
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-dialog
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/slider.mdx b/apps/v4/content/docs/components/radix/slider.mdx
index 3e10784f03..ad23a5c6de 100644
--- a/apps/v4/content/docs/components/radix/slider.mdx
+++ b/apps/v4/content/docs/components/radix/slider.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add slider
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-slider
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/switch.mdx b/apps/v4/content/docs/components/radix/switch.mdx
index fdd33c728f..77d1a3b0d5 100644
--- a/apps/v4/content/docs/components/radix/switch.mdx
+++ b/apps/v4/content/docs/components/radix/switch.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add switch
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-switch
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/tabs.mdx b/apps/v4/content/docs/components/radix/tabs.mdx
index ee9988cf48..2ab8f39622 100644
--- a/apps/v4/content/docs/components/radix/tabs.mdx
+++ b/apps/v4/content/docs/components/radix/tabs.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add tabs
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-tabs
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/toggle-group.mdx b/apps/v4/content/docs/components/radix/toggle-group.mdx
index 28819d62f7..9c9220e60d 100644
--- a/apps/v4/content/docs/components/radix/toggle-group.mdx
+++ b/apps/v4/content/docs/components/radix/toggle-group.mdx
@@ -33,7 +33,7 @@ npx shadcn@latest add toggle-group
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-toggle-group
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/toggle.mdx b/apps/v4/content/docs/components/radix/toggle.mdx
index 32b6848530..7832aa4b4d 100644
--- a/apps/v4/content/docs/components/radix/toggle.mdx
+++ b/apps/v4/content/docs/components/radix/toggle.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add toggle
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-toggle
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/components/radix/tooltip.mdx b/apps/v4/content/docs/components/radix/tooltip.mdx
index b391f250af..85ede50a0f 100644
--- a/apps/v4/content/docs/components/radix/tooltip.mdx
+++ b/apps/v4/content/docs/components/radix/tooltip.mdx
@@ -37,7 +37,7 @@ npx shadcn@latest add tooltip
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @radix-ui/react-tooltip
+npm install radix-ui
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/v4/content/docs/forms/index.mdx b/apps/v4/content/docs/forms/index.mdx
index abf56ae300..3756313e1b 100644
--- a/apps/v4/content/docs/forms/index.mdx
+++ b/apps/v4/content/docs/forms/index.mdx
@@ -3,7 +3,7 @@ title: Forms
 description: Build forms with React and shadcn/ui.
 ---
 
-import { ClipboardListIcon, InfoIcon } from "lucide-react"
+import { ClipboardListIcon } from "lucide-react"
 
 ## Pick Your Framework
 
@@ -40,6 +40,5 @@ Start by selecting your framework. Then follow the instructions to learn how to
     </svg>
     <p className="mt-2 font-medium">useActionState</p>
     <p className="text-muted-foreground mt-1 text-xs">(Coming Soon)</p>
-
   </LinkedCard>
 </div>
diff --git a/apps/v4/middleware.ts b/apps/v4/middleware.ts
deleted file mode 100644
index 973604f2c0..0000000000
--- a/apps/v4/middleware.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { NextResponse } from "next/server"
-import type { NextRequest } from "next/server"
-
-// List of all component names.
-const COMPONENT_NAMES = [
-  "accordion",
-  "alert",
-  "alert-dialog",
-  "aspect-ratio",
-  "avatar",
-  "badge",
-  "breadcrumb",
-  "button",
-  "button-group",
-  "calendar",
-  "card",
-  "carousel",
-  "chart",
-  "checkbox",
-  "collapsible",
-  "combobox",
-  "command",
-  "context-menu",
-  "data-table",
-  "date-picker",
-  "dialog",
-  "drawer",
-  "dropdown-menu",
-  "empty",
-  "field",
-  "form",
-  "hover-card",
-  "input",
-  "input-group",
-  "input-otp",
-  "item",
-  "kbd",
-  "label",
-  "menubar",
-  "native-select",
-  "navigation-menu",
-  "pagination",
-  "popover",
-  "progress",
-  "radio-group",
-  "resizable",
-  "scroll-area",
-  "select",
-  "separator",
-  "sheet",
-  "sidebar",
-  "skeleton",
-  "slider",
-  "sonner",
-  "spinner",
-  "switch",
-  "table",
-  "tabs",
-  "textarea",
-  "toast",
-  "toggle",
-  "toggle-group",
-  "tooltip",
-  "typography",
-]
-
-export function middleware(request: NextRequest) {
-  const { pathname } = request.nextUrl
-
-  // Match /docs/components/:component (not /docs/components/radix/:component or /docs/components/base/:component).
-  const match = pathname.match(/^\/docs\/components\/([^/]+)$/)
-
-  if (match) {
-    const segment = match[1]
-    // Redirect component pages to radix version (default).
-    if (COMPONENT_NAMES.includes(segment)) {
-      return NextResponse.redirect(
-        new URL(`/docs/components/radix/${segment}`, request.url),
-        301
-      )
-    }
-  }
-
-  return NextResponse.next()
-}
-
-export const config = {
-  matcher: "/docs/components/:path*",
-}
diff --git a/apps/v4/next.config.mjs b/apps/v4/next.config.mjs
index 7fa0f012e0..271f0e3912 100644
--- a/apps/v4/next.config.mjs
+++ b/apps/v4/next.config.mjs
@@ -1,5 +1,67 @@
 import { createMDX } from "fumadocs-mdx/next"
 
+// List of all component names for redirects.
+const COMPONENT_NAMES = [
+  "accordion",
+  "alert",
+  "alert-dialog",
+  "aspect-ratio",
+  "avatar",
+  "badge",
+  "breadcrumb",
+  "button",
+  "button-group",
+  "calendar",
+  "card",
+  "carousel",
+  "chart",
+  "checkbox",
+  "collapsible",
+  "combobox",
+  "command",
+  "context-menu",
+  "data-table",
+  "date-picker",
+  "dialog",
+  "drawer",
+  "dropdown-menu",
+  "empty",
+  "field",
+  "hover-card",
+  "input",
+  "input-group",
+  "input-otp",
+  "item",
+  "kbd",
+  "label",
+  "menubar",
+  "native-select",
+  "navigation-menu",
+  "pagination",
+  "popover",
+  "progress",
+  "radio-group",
+  "resizable",
+  "scroll-area",
+  "select",
+  "separator",
+  "sheet",
+  "sidebar",
+  "skeleton",
+  "slider",
+  "sonner",
+  "spinner",
+  "switch",
+  "table",
+  "tabs",
+  "textarea",
+  "toast",
+  "toggle",
+  "toggle-group",
+  "tooltip",
+  "typography",
+]
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   devIndicators: false,
@@ -29,7 +91,33 @@ const nextConfig = {
     turbopackFileSystemCacheForDev: true,
   },
   redirects() {
+    // Generate redirects for all components: /docs/components/:name → /docs/components/radix/:name.
+    const componentRedirects = COMPONENT_NAMES.map((name) => ({
+      source: `/docs/components/${name}`,
+      destination: `/docs/components/radix/${name}`,
+      permanent: true,
+    }))
+
     return [
+      // Form redirects to /docs/forms.
+      {
+        source: "/docs/components/form",
+        destination: "/docs/forms",
+        permanent: true,
+      },
+      {
+        source: "/docs/components/radix/form",
+        destination: "/docs/forms",
+        permanent: true,
+      },
+      {
+        source: "/docs/components/base/form",
+        destination: "/docs/forms",
+        permanent: true,
+      },
+      // Component redirects (default to radix).
+      ...componentRedirects,
+      // Other redirects.
       {
         source: "/components",
         destination: "/docs/components",