fix(www): code tabs (#6607)

2026-07-08 14:35:09 +00:00 · 2025-02-10 11:34:02 +04:00
parent 13fe24e1f8
commit fac0daac7b
51 changed files with 125 additions and 95 deletions
--- 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,
--- a/apps/www/components/code-tabs.tsx
+++ 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>
+  )
+}
--- 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(
--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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

--- 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() {