From 91775fa26c3fad93af1d3114acee16dc7097c0a8 Mon Sep 17 00:00:00 2001
From: Max Qian <qwdmax@outlook.com>
Date: Thu, 8 Oct 2026 14:54:22 +0800
Subject: [PATCH] chore(ui): sync shadcn components with registry

---
 components/ui/accordion.tsx       | 3 +--
 components/ui/alert-dialog.tsx    | 2 +-
 components/ui/alert.tsx           | 3 +--
 components/ui/avatar.tsx          | 3 +--
 components/ui/badge.tsx           | 3 +--
 components/ui/breadcrumb.tsx      | 3 +--
 components/ui/button-group.tsx    | 2 +-
 components/ui/button.tsx          | 3 +--
 components/ui/calendar.tsx        | 2 +-
 components/ui/card.tsx            | 3 +--
 components/ui/carousel.tsx        | 2 +-
 components/ui/chart.tsx           | 3 +--
 components/ui/checkbox.tsx        | 3 +--
 components/ui/combobox.tsx        | 2 +-
 components/ui/command.tsx         | 2 +-
 components/ui/context-menu.tsx    | 3 +--
 components/ui/dialog.tsx          | 2 +-
 components/ui/drawer.tsx          | 3 +--
 components/ui/dropdown-menu.tsx   | 3 +--
 components/ui/empty.tsx           | 3 +--
 components/ui/field.tsx           | 2 +-
 components/ui/form.tsx            | 2 +-
 components/ui/hover-card.tsx      | 3 +--
 components/ui/input-group.tsx     | 2 +-
 components/ui/input-otp.tsx       | 3 +--
 components/ui/input.tsx           | 3 +--
 components/ui/item.tsx            | 2 +-
 components/ui/kbd.tsx             | 2 +-
 components/ui/label.tsx           | 3 +--
 components/ui/menubar.tsx         | 3 +--
 components/ui/native-select.tsx   | 3 +--
 components/ui/navigation-menu.tsx | 3 +--
 components/ui/pagination.tsx      | 2 +-
 components/ui/popover.tsx         | 3 +--
 components/ui/progress.tsx        | 3 +--
 components/ui/radio-group.tsx     | 3 +--
 components/ui/resizable.tsx       | 3 +--
 components/ui/scroll-area.tsx     | 3 +--
 components/ui/select.tsx          | 3 +--
 components/ui/separator.tsx       | 3 +--
 components/ui/sheet.tsx           | 3 +--
 components/ui/sidebar.tsx         | 2 +-
 components/ui/skeleton.tsx        | 2 +-
 components/ui/slider.tsx          | 3 +--
 components/ui/spinner.tsx         | 3 +--
 components/ui/switch.tsx          | 3 +--
 components/ui/table.tsx           | 3 +--
 components/ui/tabs.tsx            | 3 +--
 components/ui/textarea.tsx        | 3 +--
 components/ui/toggle-group.tsx    | 2 +-
 components/ui/toggle.tsx          | 3 +--
 components/ui/tooltip.tsx         | 3 +--
 package.json                      | 1 +
 pnpm-lock.yaml                    | 5 ++++-
 54 files changed, 57 insertions(+), 89 deletions(-)

diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
index f746814..a3ea6f1 100644
--- a/components/ui/accordion.tsx
+++ b/components/ui/accordion.tsx
@@ -1,11 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { ChevronDownIcon } from "lucide-react"
 import { Accordion as AccordionPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
   return <AccordionPrimitive.Root data-slot="accordion" {...props} />
 }
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
index 91eb573..65aa608 100644
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@@ -1,9 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 
 function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx
index 2ecd1b4..722993c 100644
--- a/components/ui/alert.tsx
+++ b/components/ui/alert.tsx
@@ -1,7 +1,6 @@
 import * as React from "react"
 import { cva, type VariantProps } 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",
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
index 7fd54e6..7a80e8b 100644
--- a/components/ui/avatar.tsx
+++ b/components/ui/avatar.tsx
@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { Avatar as AvatarPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Avatar({
   className,
   size = "default",
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
index 5f4f4d4..a2c6ef6 100644
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -1,9 +1,8 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 import { Slot } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 const badgeVariants = cva(
   "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
   {
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
index b89bffd..1844713 100644
--- a/components/ui/breadcrumb.tsx
+++ b/components/ui/breadcrumb.tsx
@@ -1,9 +1,8 @@
 import * as React from "react"
+import { cn } from "cn"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
 import { Slot } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
   return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
 }
diff --git a/components/ui/button-group.tsx b/components/ui/button-group.tsx
index e12a094..cd0ae8c 100644
--- a/components/ui/button-group.tsx
+++ b/components/ui/button-group.tsx
@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 import { Slot } from "radix-ui"
 
-import { cn } from "@/lib/utils"
 import { Separator } from "@/components/ui/separator"
 
 const buttonGroupVariants = cva(
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 3c1488c..314bbfb 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -1,9 +1,8 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 import { Slot } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 const buttonVariants = cva(
   "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
index 07f3e5b..3bf0134 100644
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@@ -1,10 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 import { DayPicker, getDefaultClassNames, type DayButton } from "react-day-picker"
 
-import { cn } from "@/lib/utils"
 import { Button, buttonVariants } from "@/components/ui/button"
 
 function Calendar({
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index c6d38d3..7d3807e 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -1,6 +1,5 @@
 import * as React from "react"
-
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
index 49ca732..fe86625 100644
--- a/components/ui/carousel.tsx
+++ b/components/ui/carousel.tsx
@@ -1,10 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react"
 import { ArrowLeft, ArrowRight } from "lucide-react"
 
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 
 type CarouselApi = UseEmblaCarouselType[1]
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
index e3c22cc..a7ec0ef 100644
--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -1,11 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import * as RechartsPrimitive from "recharts"
 import type { TooltipValueType } from "recharts"
 
-import { cn } from "@/lib/utils"
-
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const
 
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
index c4fffc0..57aae85 100644
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -1,11 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { CheckIcon } from "lucide-react"
 import { Checkbox as CheckboxPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
   return (
     <CheckboxPrimitive.Root
diff --git a/components/ui/combobox.tsx b/components/ui/combobox.tsx
index b31ae28..a0edff3 100644
--- a/components/ui/combobox.tsx
+++ b/components/ui/combobox.tsx
@@ -2,9 +2,9 @@
 
 import * as React from "react"
 import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+import { cn } from "cn"
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {
   InputGroup,
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
index b9fe77c..93f5624 100644
--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@@ -2,9 +2,9 @@
 
 import * as React from "react"
 import { Command as CommandPrimitive } from "cmdk"
+import { cn } from "cn"
 import { SearchIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils"
 import {
   Dialog,
   DialogContent,
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
index 35c542c..d4b201e 100644
--- a/components/ui/context-menu.tsx
+++ b/components/ui/context-menu.tsx
@@ -1,11 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
 }
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index bd2fb05..b607e34 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -1,10 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { XIcon } from "lucide-react"
 import { Dialog as DialogPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
index cc9fe7e..0107311 100644
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { Drawer as DrawerPrimitive } from "vaul"
 
-import { cn } from "@/lib/utils"
-
 function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
   return <DrawerPrimitive.Root data-slot="drawer" {...props} />
 }
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index 38326c0..4875958 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -1,11 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 }
diff --git a/components/ui/empty.tsx b/components/ui/empty.tsx
index 17d1d1c..d95e300 100644
--- a/components/ui/empty.tsx
+++ b/components/ui/empty.tsx
@@ -1,6 +1,5 @@
 import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 function Empty({ className, ...props }: React.ComponentProps<"div">) {
   return (
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
index e7eb39b..3a1a33f 100644
--- a/components/ui/field.tsx
+++ b/components/ui/field.tsx
@@ -2,8 +2,8 @@
 
 import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 
-import { cn } from "@/lib/utils"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
 
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
index 35cbee8..d7f6bc6 100644
--- a/components/ui/form.tsx
+++ b/components/ui/form.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import type { Label as LabelPrimitive } from "radix-ui"
 import { Slot } from "radix-ui"
 import {
@@ -13,7 +14,6 @@ import {
   type FieldValues,
 } from "react-hook-form"
 
-import { cn } from "@/lib/utils"
 import { Label } from "@/components/ui/label"
 
 const Form = FormProvider
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
index faf3b43..cf4c7c3 100644
--- a/components/ui/hover-card.tsx
+++ b/components/ui/hover-card.tsx
@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { HoverCard as HoverCardPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
   return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
 }
diff --git a/components/ui/input-group.tsx b/components/ui/input-group.tsx
index 24859b9..9bfd2d5 100644
--- a/components/ui/input-group.tsx
+++ b/components/ui/input-group.tsx
@@ -2,8 +2,8 @@
 
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
diff --git a/components/ui/input-otp.tsx b/components/ui/input-otp.tsx
index 978dc64..81358f2 100644
--- a/components/ui/input-otp.tsx
+++ b/components/ui/input-otp.tsx
@@ -1,11 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { OTPInput, OTPInputContext } from "input-otp"
 import { MinusIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils"
-
 function InputOTP({
   className,
   containerClassName,
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index f1124ae..ddb9b31 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -1,6 +1,5 @@
 import * as React from "react"
-
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
diff --git a/components/ui/item.tsx b/components/ui/item.tsx
index 59d54ac..cdcb2d9 100644
--- a/components/ui/item.tsx
+++ b/components/ui/item.tsx
@@ -1,8 +1,8 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 import { Slot } from "radix-ui"
 
-import { cn } from "@/lib/utils"
 import { Separator } from "@/components/ui/separator"
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
diff --git a/components/ui/kbd.tsx b/components/ui/kbd.tsx
index 2459224..8089ad7 100644
--- a/components/ui/kbd.tsx
+++ b/components/ui/kbd.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
   return (
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
index 7bac350..6c8b75d 100644
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { Label as LabelPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
   return (
     <LabelPrimitive.Root
diff --git a/components/ui/menubar.tsx b/components/ui/menubar.tsx
index 29c8c4e..9ae23ff 100644
--- a/components/ui/menubar.tsx
+++ b/components/ui/menubar.tsx
@@ -1,11 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 import { Menubar as MenubarPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {
   return (
     <MenubarPrimitive.Root
diff --git a/components/ui/native-select.tsx b/components/ui/native-select.tsx
index d8c7912..55eed15 100644
--- a/components/ui/native-select.tsx
+++ b/components/ui/native-select.tsx
@@ -1,8 +1,7 @@
 import * as React from "react"
+import { cn } from "cn"
 import { ChevronDownIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils"
-
 function NativeSelect({
   className,
   size = "default",
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
index 30e5638..d17574c 100644
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@@ -1,10 +1,9 @@
 import * as React from "react"
 import { cva } from "class-variance-authority"
+import { cn } from "cn"
 import { ChevronDownIcon } from "lucide-react"
 import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function NavigationMenu({
   className,
   children,
diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
index 9e8efa3..410952b 100644
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
+import { cn } from "cn"
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils"
 import { buttonVariants, type Button } from "@/components/ui/button"
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
index 15649d7..43874c8 100644
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { Popover as PopoverPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />
 }
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
index d5f975d..a00007b 100644
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { Progress as ProgressPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Progress({
   className,
   value,
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
index fe51453..2dc7ec5 100644
--- a/components/ui/radio-group.tsx
+++ b/components/ui/radio-group.tsx
@@ -1,11 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { CircleIcon } from "lucide-react"
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function RadioGroup({
   className,
   ...props
diff --git a/components/ui/resizable.tsx b/components/ui/resizable.tsx
index b2f4356..73abef1 100644
--- a/components/ui/resizable.tsx
+++ b/components/ui/resizable.tsx
@@ -1,10 +1,9 @@
 "use client"
 
+import { cn } from "cn"
 import { GripVerticalIcon } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
 
-import { cn } from "@/lib/utils"
-
 function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps) {
   return (
     <ResizablePrimitive.Group
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
index 244f75f..701cd41 100644
--- a/components/ui/scroll-area.tsx
+++ b/components/ui/scroll-area.tsx
@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function ScrollArea({
   className,
   children,
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 0bd64a5..bf8652d 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -1,11 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { Select as SelectPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
   return <SelectPrimitive.Root data-slot="select" {...props} />
 }
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
index cd873e3..6a553b9 100644
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { Separator as SeparatorPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Separator({
   className,
   orientation = "horizontal",
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index a52ceb1..ededa0a 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -1,11 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { XIcon } from "lucide-react"
 import { Dialog as SheetPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index d32b050..e32dba6 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -2,11 +2,11 @@
 
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 import { PanelLeftIcon } from "lucide-react"
 import { Slot } from "radix-ui"
 
 import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Separator } from "@/components/ui/separator"
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
index 3ec6be7..a1ceb05 100644
--- a/components/ui/skeleton.tsx
+++ b/components/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
index 3fe503d..bbd689c 100644
--- a/components/ui/slider.tsx
+++ b/components/ui/slider.tsx
@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { Slider as SliderPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Slider({
   className,
   defaultValue,
diff --git a/components/ui/spinner.tsx b/components/ui/spinner.tsx
index a70e713..3e0fd0a 100644
--- a/components/ui/spinner.tsx
+++ b/components/ui/spinner.tsx
@@ -1,7 +1,6 @@
+import { cn } from "cn"
 import { Loader2Icon } from "lucide-react"
 
-import { cn } from "@/lib/utils"
-
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
   return (
     <Loader2Icon
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
index 8baa844..c45932a 100644
--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { Switch as SwitchPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Switch({
   className,
   size = "default",
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index 6da6be4..d6b58a7 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -1,8 +1,7 @@
 "use client"
 
 import * as React from "react"
-
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
index de06740..5fca29f 100644
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 import { Tabs as TabsPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function Tabs({
   className,
   orientation = "horizontal",
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index e67d8fe..bf23f6c 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -1,6 +1,5 @@
 import * as React from "react"
-
-import { cn } from "@/lib/utils"
+import { cn } from "cn"
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
diff --git a/components/ui/toggle-group.tsx b/components/ui/toggle-group.tsx
index 56eb368..816503c 100644
--- a/components/ui/toggle-group.tsx
+++ b/components/ui/toggle-group.tsx
@@ -2,9 +2,9 @@
 
 import * as React from "react"
 import { type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
 import { toggleVariants } from "@/components/ui/toggle"
 
 const ToggleGroupContext = React.createContext<
diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
index d0b112f..e618688 100644
--- a/components/ui/toggle.tsx
+++ b/components/ui/toggle.tsx
@@ -2,10 +2,9 @@
 
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
 import { Toggle as TogglePrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index d0199bc..db44709 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { cn } from "cn"
 import { Tooltip as TooltipPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function TooltipProvider({
   delayDuration = 0,
   ...props
diff --git a/package.json b/package.json
index b64f76a..5bb6794 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "cn": "^0.4.0",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f60127c..1ec6249 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       cmdk:
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
+      cn:
+        specifier: ^0.4.0
+        version: 0.4.0
       date-fns:
         specifier: ^4.4.0
         version: 4.4.0
@@ -8650,7 +8653,7 @@ snapshots:
       immer: 11.1.21
       redux: 5.0.1
       redux-thunk: 3.1.0(redux@5.0.1)
-      reselect: 5.2.0
+      reselect: 5.3.0
     optionalDependencies:
       react: 19.3.0
       react-redux: 9.3.0(@types/react@19.3.0)(react@19.3.0)(redux@5.0.1)