Migrate to the cn package

- Ran `npx shadcn@latest migrate cn`: swaps clsx + tailwind-merge for cn
- Import cn from "cn" everywhere (matches what `shadcn add` now writes)
  and remove the src/lib/utils.js re-export shim

Co-Authored-By: Claude Opus 5.5 <[email protected]>

package-lock.json

@@ -9,14 +9,13 @@
       "version": "0.1.0",
       "dependencies": {
         "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
+        "cn": "^0.4.0",
         "lucide-react": "^1.49.0",
         "next": "^16.3.7",
         "radix-ui": "^1.6.7",
         "react": "^19.3.0",
         "react-dom": "^19.3.0",
         "sharp": "^0.35.5",
-        "tailwind-merge": "^3.7.0",
         "tw-animate-css": "^1.4.0"
       },
       "devDependencies": {
@@ -4458,6 +4457,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/cn": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cn/-/cn-0.4.0.tgz",
+      "integrity": "sha512-qOAeUhPwPzBxx6jaeQdo646XIKliKHc2j1ZF7Ngb1o0pJZKH5gq8FkA0aVdUdPFUDXNXyUCXpCtoJISo6dhizg==",
+      "license": "MIT",
+      "bin": {
+        "cn": "bin/cn.mjs"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -8179,16 +8190,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/tailwind-merge": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.7.0.tgz",
-      "integrity": "sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/dcastil"
-      }
-    },
     "node_modules/tailwindcss": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",

package.json

@@ -10,14 +10,13 @@
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
+    "cn": "^0.4.0",
     "lucide-react": "^1.49.0",
     "next": "^16.3.7",
     "radix-ui": "^1.6.7",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "sharp": "^0.35.5",
-    "tailwind-merge": "^3.7.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {

src/app/components/ContactButtons.js

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { MessageCircle, MessageSquare, Phone } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { cn } from "cn";
 import { business, links } from "@/lib/site";
 
 // Call / Text (and optionally WhatsApp and Get a quote) buttons.

src/app/components/Navbar.js

@@ -23,7 +23,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
-import { cn } from "@/lib/utils";
+import { cn } from "cn";
 import { business } from "@/lib/site";
 import { services } from "@/lib/services";
 

src/components/ui/accordion.jsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import { Accordion as AccordionPrimitive } from "radix-ui"
 import { ChevronDownIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 function Accordion({
   ...props

src/components/ui/alert.jsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { cva } from "class-variance-authority";
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 const alertVariants = cva(
   "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",

src/components/ui/button.jsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { cva } from "class-variance-authority";
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 import { Slot } from "radix-ui"
 
 const buttonVariants = cva(

src/components/ui/card.jsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 function Card({
   className,

src/components/ui/input.jsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 function Input({
   className,

src/components/ui/label.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 import { Label as LabelPrimitive } from "radix-ui"
 
 function Label({

src/components/ui/native-select.jsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 import { ChevronDownIcon } from "lucide-react"
 
 function NativeSelect({

src/components/ui/navigation-menu.jsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { cva } from "class-variance-authority"
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 import { ChevronDownIcon } from "lucide-react"
 import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
 

src/components/ui/radio-group.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 import { CircleIcon } from "lucide-react"
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
 

src/components/ui/separator.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 import { Separator as SeparatorPrimitive } from "radix-ui"
 
 function Separator({

src/components/ui/sheet.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 import { XIcon } from "lucide-react"
 import { Dialog as SheetPrimitive } from "radix-ui"
 

src/components/ui/table.jsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 function Table({
   className,

src/components/ui/textarea.jsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 function Textarea({
   className,

src/lib/utils.js

@@ -1,6 +0,0 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}