diff --git a/apps/www/components/code-block-command.tsx b/apps/www/components/code-block-command.tsx
index f74e21f169..1e98073a83 100644
--- a/apps/www/components/code-block-command.tsx
+++ b/apps/www/components/code-block-command.tsx
@@ -56,7 +56,7 @@ export function CodeBlockCommand({
   return (
     <div className="relative mt-6 max-h-[650px] overflow-x-auto rounded-xl bg-zinc-950 dark:bg-zinc-900">
       <Tabs
-        defaultValue={packageManager}
+        value={packageManager}
         onValueChange={(value) => {
           setConfig({
             ...config,
diff --git a/apps/www/components/code-tabs.tsx b/apps/www/components/code-tabs.tsx
new file mode 100644
index 0000000000..79655cf519
--- /dev/null
+++ b/apps/www/components/code-tabs.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+
+import { useConfig } from "@/hooks/use-config"
+import { Tabs } from "@/registry/default/ui/tabs"
+
+export function CodeTabs({ children }: React.ComponentProps<typeof Tabs>) {
+  const [config, setConfig] = useConfig()
+
+  const installationType = React.useMemo(() => {
+    return config.installationType || "cli"
+  }, [config])
+
+  return (
+    <Tabs
+      value={installationType}
+      onValueChange={(value) =>
+        setConfig({ ...config, installationType: value as "cli" | "manual" })
+      }
+      className="relative mt-6 w-full"
+    >
+      {children}
+    </Tabs>
+  )
+}
diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
index 680ae3ce7f..e99d6ebfbe 100644
--- a/apps/www/components/mdx-components.tsx
+++ b/apps/www/components/mdx-components.tsx
@@ -13,6 +13,7 @@ import { useConfig } from "@/hooks/use-config"
 import { Callout } from "@/components/callout"
 import { CodeBlockCommand } from "@/components/code-block-command"
 import { CodeBlockWrapper } from "@/components/code-block-wrapper"
+import { CodeTabs } from "@/components/code-tabs"
 import { ComponentExample } from "@/components/component-example"
 import { ComponentPreview } from "@/components/component-preview"
 import { ComponentSource } from "@/components/component-source"
@@ -245,6 +246,7 @@ const components = {
   CodeBlockWrapper: ({ ...props }) => (
     <CodeBlockWrapper className="rounded-md border" {...props} />
   ),
+  CodeTabs,
   Step: ({ className, ...props }: React.ComponentProps<"h3">) => (
     <h3
       className={cn(
diff --git a/apps/www/content/docs/components/accordion.mdx b/apps/www/content/docs/components/accordion.mdx
index ae1c314a15..311456e4e4 100644
--- a/apps/www/content/docs/components/accordion.mdx
+++ b/apps/www/content/docs/components/accordion.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -78,7 +78,7 @@ module.exports = {
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/alert-dialog.mdx b/apps/www/content/docs/components/alert-dialog.mdx
index cfcf4c95e5..187528f0b3 100644
--- a/apps/www/content/docs/components/alert-dialog.mdx
+++ b/apps/www/content/docs/components/alert-dialog.mdx
@@ -16,7 +16,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -50,7 +50,7 @@ npm install @radix-ui/react-alert-dialog
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/alert.mdx b/apps/www/content/docs/components/alert.mdx
index 7d32e75b2e..ad40fa8de1 100644
--- a/apps/www/content/docs/components/alert.mdx
+++ b/apps/www/content/docs/components/alert.mdx
@@ -12,7 +12,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -40,7 +40,7 @@ npx shadcn@latest add alert
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/aspect-ratio.mdx b/apps/www/content/docs/components/aspect-ratio.mdx
index 5b9fc79eff..7698a1f070 100644
--- a/apps/www/content/docs/components/aspect-ratio.mdx
+++ b/apps/www/content/docs/components/aspect-ratio.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-aspect-ratio
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx
index 454a31fb33..7e801e97a2 100644
--- a/apps/www/content/docs/components/avatar.mdx
+++ b/apps/www/content/docs/components/avatar.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-avatar
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/badge.mdx b/apps/www/content/docs/components/badge.mdx
index 2053be1200..a8f7be69d6 100644
--- a/apps/www/content/docs/components/badge.mdx
+++ b/apps/www/content/docs/components/badge.mdx
@@ -12,7 +12,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -40,7 +40,7 @@ npx shadcn@latest add badge
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/breadcrumb.mdx b/apps/www/content/docs/components/breadcrumb.mdx
index 90abd33b65..84a791ba86 100644
--- a/apps/www/content/docs/components/breadcrumb.mdx
+++ b/apps/www/content/docs/components/breadcrumb.mdx
@@ -12,7 +12,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -40,7 +40,7 @@ npx shadcn@latest add breadcrumb
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx
index f0a487364a..4d3b617406 100644
--- a/apps/www/content/docs/components/button.mdx
+++ b/apps/www/content/docs/components/button.mdx
@@ -9,7 +9,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -43,7 +43,7 @@ npm install @radix-ui/react-slot
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/calendar.mdx b/apps/www/content/docs/components/calendar.mdx
index 867dbd0eaf..49a1157ec3 100644
--- a/apps/www/content/docs/components/calendar.mdx
+++ b/apps/www/content/docs/components/calendar.mdx
@@ -18,7 +18,7 @@ The `Calendar` component is built on top of [React DayPicker](https://react-day-
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -56,7 +56,7 @@ The `Calendar` component uses the `Button` component. Make sure you have it inst
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/card.mdx b/apps/www/content/docs/components/card.mdx
index 63036867c4..fa1d7b85cd 100644
--- a/apps/www/content/docs/components/card.mdx
+++ b/apps/www/content/docs/components/card.mdx
@@ -8,7 +8,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -36,7 +36,7 @@ npx shadcn@latest add card
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/carousel.mdx b/apps/www/content/docs/components/carousel.mdx
index ebda81c552..f2ca47d253 100644
--- a/apps/www/content/docs/components/carousel.mdx
+++ b/apps/www/content/docs/components/carousel.mdx
@@ -19,7 +19,7 @@ The carousel component is built using the [Embla Carousel](https://www.embla-car
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -54,7 +54,7 @@ npm install embla-carousel-react
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/chart.mdx b/apps/www/content/docs/components/chart.mdx
index 9566275e48..2a228e7467 100644
--- a/apps/www/content/docs/components/chart.mdx
+++ b/apps/www/content/docs/components/chart.mdx
@@ -57,7 +57,7 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
 
 </Callout>
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -139,7 +139,7 @@ npm install recharts
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Your First Chart
 
diff --git a/apps/www/content/docs/components/checkbox.mdx b/apps/www/content/docs/components/checkbox.mdx
index dd52022fb1..77c3882fbc 100644
--- a/apps/www/content/docs/components/checkbox.mdx
+++ b/apps/www/content/docs/components/checkbox.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-checkbox
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/collapsible.mdx b/apps/www/content/docs/components/collapsible.mdx
index 6f9bfce731..5e43081661 100644
--- a/apps/www/content/docs/components/collapsible.mdx
+++ b/apps/www/content/docs/components/collapsible.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-collapsible
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx
index f5bcc6737c..ec38d6005d 100644
--- a/apps/www/content/docs/components/command.mdx
+++ b/apps/www/content/docs/components/command.mdx
@@ -19,7 +19,7 @@ The `<Command />` component uses the [`cmdk`](https://cmdk.paco.me) component by
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -53,7 +53,7 @@ npm install cmdk
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/context-menu.mdx b/apps/www/content/docs/components/context-menu.mdx
index 2a0f1b789a..ed720a383b 100644
--- a/apps/www/content/docs/components/context-menu.mdx
+++ b/apps/www/content/docs/components/context-menu.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-context-menu
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/dialog.mdx b/apps/www/content/docs/components/dialog.mdx
index 85df8727f0..f3fd2522cf 100644
--- a/apps/www/content/docs/components/dialog.mdx
+++ b/apps/www/content/docs/components/dialog.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-dialog
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/drawer.mdx b/apps/www/content/docs/components/drawer.mdx
index 445a8ced4a..5691c660e4 100644
--- a/apps/www/content/docs/components/drawer.mdx
+++ b/apps/www/content/docs/components/drawer.mdx
@@ -14,7 +14,7 @@ Drawer is built on top of [Vaul](https://github.com/emilkowalski/vaul) by [emilk
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install vaul
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/dropdown-menu.mdx b/apps/www/content/docs/components/dropdown-menu.mdx
index 754feca561..a6e19622d9 100644
--- a/apps/www/content/docs/components/dropdown-menu.mdx
+++ b/apps/www/content/docs/components/dropdown-menu.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-dropdown-menu
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/form.mdx b/apps/www/content/docs/components/form.mdx
index 0582b7eee8..87756d55a4 100644
--- a/apps/www/content/docs/components/form.mdx
+++ b/apps/www/content/docs/components/form.mdx
@@ -75,7 +75,7 @@ const form = useForm()
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -115,7 +115,7 @@ npm install @radix-ui/react-label @radix-ui/react-slot react-hook-form @hookform
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/hover-card.mdx b/apps/www/content/docs/components/hover-card.mdx
index 152d26b82c..b87b5cc164 100644
--- a/apps/www/content/docs/components/hover-card.mdx
+++ b/apps/www/content/docs/components/hover-card.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-hover-card
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/input-otp.mdx b/apps/www/content/docs/components/input-otp.mdx
index fbc46fa4f4..99f147c187 100644
--- a/apps/www/content/docs/components/input-otp.mdx
+++ b/apps/www/content/docs/components/input-otp.mdx
@@ -14,7 +14,7 @@ Input OTP is built on top of [input-otp](https://github.com/guilhermerodz/input-
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -100,7 +100,7 @@ module.exports = {
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/input.mdx b/apps/www/content/docs/components/input.mdx
index 49d6ddf71c..70eef4b352 100644
--- a/apps/www/content/docs/components/input.mdx
+++ b/apps/www/content/docs/components/input.mdx
@@ -12,7 +12,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -40,7 +40,7 @@ npx shadcn@latest add input
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/label.mdx b/apps/www/content/docs/components/label.mdx
index 96d7888259..6b53c2a359 100644
--- a/apps/www/content/docs/components/label.mdx
+++ b/apps/www/content/docs/components/label.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-label
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/menubar.mdx b/apps/www/content/docs/components/menubar.mdx
index f8df5e7b91..1590ccfe4c 100644
--- a/apps/www/content/docs/components/menubar.mdx
+++ b/apps/www/content/docs/components/menubar.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-menubar
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/navigation-menu.mdx b/apps/www/content/docs/components/navigation-menu.mdx
index 1c588100ad..25345dc1a3 100644
--- a/apps/www/content/docs/components/navigation-menu.mdx
+++ b/apps/www/content/docs/components/navigation-menu.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-navigation-menu
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/pagination.mdx b/apps/www/content/docs/components/pagination.mdx
index d264dda773..9e564d7ae6 100644
--- a/apps/www/content/docs/components/pagination.mdx
+++ b/apps/www/content/docs/components/pagination.mdx
@@ -11,7 +11,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -39,7 +39,7 @@ npx shadcn@latest add pagination
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/popover.mdx b/apps/www/content/docs/components/popover.mdx
index 13f9f37597..ee7604d2db 100644
--- a/apps/www/content/docs/components/popover.mdx
+++ b/apps/www/content/docs/components/popover.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-popover
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/progress.mdx b/apps/www/content/docs/components/progress.mdx
index bc60ee031f..28dc665771 100644
--- a/apps/www/content/docs/components/progress.mdx
+++ b/apps/www/content/docs/components/progress.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-progress
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/radio-group.mdx b/apps/www/content/docs/components/radio-group.mdx
index 68f7d2e9d8..edcef2f91e 100644
--- a/apps/www/content/docs/components/radio-group.mdx
+++ b/apps/www/content/docs/components/radio-group.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-radio-group
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/resizable.mdx b/apps/www/content/docs/components/resizable.mdx
index d3acfe4092..63d4a730c4 100644
--- a/apps/www/content/docs/components/resizable.mdx
+++ b/apps/www/content/docs/components/resizable.mdx
@@ -18,7 +18,7 @@ The `Resizable` component is built on top of [react-resizable-panels](https://gi
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -52,7 +52,7 @@ npm install react-resizable-panels
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/scroll-area.mdx b/apps/www/content/docs/components/scroll-area.mdx
index 0206731e05..8484b4b6c9 100644
--- a/apps/www/content/docs/components/scroll-area.mdx
+++ b/apps/www/content/docs/components/scroll-area.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-scroll-area
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/select.mdx b/apps/www/content/docs/components/select.mdx
index b75c72cfae..d81504a7df 100644
--- a/apps/www/content/docs/components/select.mdx
+++ b/apps/www/content/docs/components/select.mdx
@@ -15,7 +15,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -49,7 +49,7 @@ npm install @radix-ui/react-select
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/separator.mdx b/apps/www/content/docs/components/separator.mdx
index 19a16af233..92a3f5bd0b 100644
--- a/apps/www/content/docs/components/separator.mdx
+++ b/apps/www/content/docs/components/separator.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -44,7 +44,7 @@ npm install @radix-ui/react-separator
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/sheet.mdx b/apps/www/content/docs/components/sheet.mdx
index 5a31cc1f4e..dee6570262 100644
--- a/apps/www/content/docs/components/sheet.mdx
+++ b/apps/www/content/docs/components/sheet.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-dialog
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ### Usage
 
diff --git a/apps/www/content/docs/components/sidebar.mdx b/apps/www/content/docs/components/sidebar.mdx
index 5c32540d48..ed021118e9 100644
--- a/apps/www/content/docs/components/sidebar.mdx
+++ b/apps/www/content/docs/components/sidebar.mdx
@@ -30,7 +30,7 @@ Customizable.
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -146,7 +146,7 @@ sidebar: {
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Structure
 
diff --git a/apps/www/content/docs/components/skeleton.mdx b/apps/www/content/docs/components/skeleton.mdx
index 321be87112..42429f581a 100644
--- a/apps/www/content/docs/components/skeleton.mdx
+++ b/apps/www/content/docs/components/skeleton.mdx
@@ -8,7 +8,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -36,7 +36,7 @@ npx shadcn@latest add skeleton
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/slider.mdx b/apps/www/content/docs/components/slider.mdx
index 2adebc829d..f68c7239db 100644
--- a/apps/www/content/docs/components/slider.mdx
+++ b/apps/www/content/docs/components/slider.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-slider
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/sonner.mdx b/apps/www/content/docs/components/sonner.mdx
index 79bdcb5716..a3898bc6f6 100644
--- a/apps/www/content/docs/components/sonner.mdx
+++ b/apps/www/content/docs/components/sonner.mdx
@@ -14,7 +14,7 @@ Sonner is built and maintained by [emilkowalski\_](https://twitter.com/emilkowal
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -88,7 +88,7 @@ export default function RootLayout({ children }) {
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/switch.mdx b/apps/www/content/docs/components/switch.mdx
index 26414944bb..9a751576c0 100644
--- a/apps/www/content/docs/components/switch.mdx
+++ b/apps/www/content/docs/components/switch.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-switch
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/table.mdx b/apps/www/content/docs/components/table.mdx
index 7d516089b8..0c281351e9 100644
--- a/apps/www/content/docs/components/table.mdx
+++ b/apps/www/content/docs/components/table.mdx
@@ -8,7 +8,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -36,7 +36,7 @@ npx shadcn@latest add table
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/tabs.mdx b/apps/www/content/docs/components/tabs.mdx
index 8a886d7749..83807abefb 100644
--- a/apps/www/content/docs/components/tabs.mdx
+++ b/apps/www/content/docs/components/tabs.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-tabs
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/textarea.mdx b/apps/www/content/docs/components/textarea.mdx
index a63b8e62ce..58b0ebfb39 100644
--- a/apps/www/content/docs/components/textarea.mdx
+++ b/apps/www/content/docs/components/textarea.mdx
@@ -8,7 +8,7 @@ component: true
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -36,7 +36,7 @@ npx shadcn@latest add textarea
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/toast.mdx b/apps/www/content/docs/components/toast.mdx
index 87b6c45dec..0790c9b12a 100644
--- a/apps/www/content/docs/components/toast.mdx
+++ b/apps/www/content/docs/components/toast.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -97,7 +97,7 @@ export default function RootLayout({ children }) {
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/toggle-group.mdx b/apps/www/content/docs/components/toggle-group.mdx
index dea014fb8d..53734afa85 100644
--- a/apps/www/content/docs/components/toggle-group.mdx
+++ b/apps/www/content/docs/components/toggle-group.mdx
@@ -14,7 +14,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -48,7 +48,7 @@ npm install @radix-ui/react-toggle-group
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/toggle.mdx b/apps/www/content/docs/components/toggle.mdx
index 132a597b98..56696b0fe8 100644
--- a/apps/www/content/docs/components/toggle.mdx
+++ b/apps/www/content/docs/components/toggle.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-toggle
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/content/docs/components/tooltip.mdx b/apps/www/content/docs/components/tooltip.mdx
index b88d5a9356..bce711b8c2 100644
--- a/apps/www/content/docs/components/tooltip.mdx
+++ b/apps/www/content/docs/components/tooltip.mdx
@@ -11,7 +11,7 @@ links:
 
 ## Installation
 
-<Tabs defaultValue="cli">
+<CodeTabs>
 
 <TabsList>
   <TabsTrigger value="cli">CLI</TabsTrigger>
@@ -45,7 +45,7 @@ npm install @radix-ui/react-tooltip
 
 </TabsContent>
 
-</Tabs>
+</CodeTabs>
 
 ## Usage
 
diff --git a/apps/www/hooks/use-config.ts b/apps/www/hooks/use-config.ts
index 982e9ba0e0..e86324b3c6 100644
--- a/apps/www/hooks/use-config.ts
+++ b/apps/www/hooks/use-config.ts
@@ -9,6 +9,7 @@ type Config = {
   theme: BaseColor["name"]
   radius: number
   packageManager: "npm" | "yarn" | "pnpm" | "bun"
+  installationType: "cli" | "manual"
 }
 
 const configAtom = atomWithStorage<Config>("config", {
@@ -16,6 +17,7 @@ const configAtom = atomWithStorage<Config>("config", {
   theme: "zinc",
   radius: 0.5,
   packageManager: "pnpm",
+  installationType: "cli",
 })
 
 export function useConfig() {