diff --git a/CHANGELOG.md b/CHANGELOG.md
index c56612b9..67492f01 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [Unreleased]
+
+### Changed
+
+- Replaced `clsx` and `tailwind-merge` with the `cn` package
+
 ## [1.0.19] - 2026-08-20
 
 ### Fixed
diff --git a/packages/components/package.json b/packages/components/package.json
index cd9f607f..859dc751 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -63,7 +63,7 @@
     "@headlessui/react": "2.2.0",
     "@shikijs/transformers": "3.21.0",
     "@sindresorhus/slugify": "2.2.1",
-    "clsx": "2.1.1",
+    "cn": "^0.2.4",
     "color": "4.2.3",
     "comlink": "4.4.2",
     "hast": "1.0.0",
@@ -71,8 +71,7 @@
     "lucide-react": "0.453.0",
     "mermaid": "11.16.1",
     "react-use-rect": "2.0.6",
-    "shiki": "3.21.0",
-    "tailwind-merge": "2.6.0"
+    "shiki": "3.21.0"
   },
   "devDependencies": {
     "@shikijs/types": "3.21.0",
diff --git a/packages/components/src/components/accordion/accordion-cover.tsx b/packages/components/src/components/accordion/accordion-cover.tsx
index bc4e3eca..3cddd9f3 100644
--- a/packages/components/src/components/accordion/accordion-cover.tsx
+++ b/packages/components/src/components/accordion/accordion-cover.tsx
@@ -1,7 +1,6 @@
+import { cn } from "cn";
 import type { ReactNode } from "react";
-
 import { Icon } from "@/components/icon";
-import { cn } from "@/utils/cn";
 
 type AccordionCoverProps = {
   id: string;
diff --git a/packages/components/src/components/accordion/accordion-group.tsx b/packages/components/src/components/accordion/accordion-group.tsx
index ed02eff1..9f8446df 100644
--- a/packages/components/src/components/accordion/accordion-group.tsx
+++ b/packages/components/src/components/accordion/accordion-group.tsx
@@ -1,7 +1,6 @@
+import { cn } from "cn";
 import type { ReactNode } from "react";
-
 import { Classes } from "@/constants/selectors";
-import { cn } from "@/utils/cn";
 
 type AccordionGroupProps = {
   children: ReactNode;
diff --git a/packages/components/src/components/accordion/accordion.tsx b/packages/components/src/components/accordion/accordion.tsx
index 2a187435..18bd318e 100644
--- a/packages/components/src/components/accordion/accordion.tsx
+++ b/packages/components/src/components/accordion/accordion.tsx
@@ -1,4 +1,5 @@
 import slugify from "@sindresorhus/slugify";
+import { cn } from "cn";
 import {
   createContext,
   type ReactNode,
@@ -9,9 +10,7 @@ import {
   useState,
 } from "react";
 import { Icon as ComponentIcon } from "@/components/icon";
-
 import { Classes } from "@/constants/selectors";
-import { cn } from "@/utils/cn";
 import type { IconType } from "@/utils/icon-utils";
 
 import { AccordionCover } from "./accordion-cover";
diff --git a/packages/components/src/components/badge/badge.tsx b/packages/components/src/components/badge/badge.tsx
index 7d07fad6..f6830362 100644
--- a/packages/components/src/components/badge/badge.tsx
+++ b/packages/components/src/components/badge/badge.tsx
@@ -1,6 +1,6 @@
+import { cn } from "cn";
 import type React from "react";
 import { Icon } from "@/components/icon";
-import { cn } from "@/utils/cn";
 import type { IconLibrary, IconType } from "@/utils/icon-utils";
 
 const BADGE_COLORS = [
diff --git a/packages/components/src/components/callout/callout.tsx b/packages/components/src/components/callout/callout.tsx
index b1de7ffc..76fdfed0 100644
--- a/packages/components/src/components/callout/callout.tsx
+++ b/packages/components/src/components/callout/callout.tsx
@@ -1,3 +1,4 @@
+import { cn } from "cn";
 import Color from "color";
 import type { ReactNode } from "react";
 import { Icon as ComponentIcon } from "@/components/icon";
@@ -10,7 +11,6 @@ import {
   TipIcon,
   WarningIcon,
 } from "@/icons";
-import { cn } from "@/utils/cn";
 import type { IconLibrary, IconType } from "@/utils/icon-utils";
 
 type CalloutVariant =
diff --git a/packages/components/src/components/card/card.tsx b/packages/components/src/components/card/card.tsx
index 8f128f65..ad1022a4 100644
--- a/packages/components/src/components/card/card.tsx
+++ b/packages/components/src/components/card/card.tsx
@@ -1,4 +1,6 @@
 /** biome-ignore-all lint/complexity/noExcessiveCognitiveComplexity: TODO */
+
+import { cn } from "cn";
 import { ArrowUpRight } from "lucide-react";
 import type React from "react";
 import type {
@@ -11,7 +13,6 @@ import type {
 import { Icon as ComponentIcon } from "@/components/icon";
 import { Classes } from "@/constants/selectors";
 import { ArrowRightIcon } from "@/icons";
-import { cn } from "@/utils/cn";
 import type { IconLibrary, IconType } from "@/utils/icon-utils";
 import { isRemoteUrl } from "@/utils/is-remote-url";
 
diff --git a/packages/components/src/components/code-block/base-code-block.tsx b/packages/components/src/components/code-block/base-code-block.tsx
index 54e114c5..053a7093 100644
--- a/packages/components/src/components/code-block/base-code-block.tsx
+++ b/packages/components/src/components/code-block/base-code-block.tsx
@@ -1,5 +1,5 @@
+import { cn } from "cn";
 import type React from "react";
-
 import {
   DEFAULT_EXPANDABLE_CODE_BLOCK_HEIGHT,
   SMALL_EXPANDABLE_CODE_BLOCK_HEIGHT,
@@ -7,7 +7,6 @@ import {
   useExpandable,
 } from "@/hooks/use-expandable";
 import { useGetShikiHighlightedHtml } from "@/hooks/use-get-shiki-highlighted-html";
-import { cn } from "@/utils/cn";
 import { getShikiBackgroundColors } from "@/utils/shiki/get-shiki-background-colors";
 import { getCodeString, useCalculateCodeLines } from "@/utils/shiki/lib";
 
diff --git a/packages/components/src/components/code-block/code-block.tsx b/packages/components/src/components/code-block/code-block.tsx
index 31f12ced..d536739f 100644
--- a/packages/components/src/components/code-block/code-block.tsx
+++ b/packages/components/src/components/code-block/code-block.tsx
@@ -1,7 +1,6 @@
+import { cn } from "cn";
 import type { ReactNode, RefObject } from "react";
-
 import { Classes } from "@/constants/selectors";
-import { cn } from "@/utils/cn";
 import type { CodeBlockTheme, CodeStyling } from "@/utils/shiki/code-styling";
 import { getCodeString } from "@/utils/shiki/lib";
 
diff --git a/packages/components/src/components/code-block/code-header.tsx b/packages/components/src/components/code-block/code-header.tsx
index f38f0586..654e80a3 100644
--- a/packages/components/src/components/code-block/code-header.tsx
+++ b/packages/components/src/components/code-block/code-header.tsx
@@ -1,8 +1,7 @@
+import { cn } from "cn";
 import type { ReactNode } from "react";
-
 import { Icon as ComponentIcon } from "@/components/icon";
 import { Classes } from "@/constants/selectors";
-import { cn } from "@/utils/cn";
 import type { CodeBlockTheme } from "@/utils/shiki/code-styling";
 
 type CodeHeaderProps = {
diff --git a/packages/components/src/components/code-block/copy-button.tsx b/packages/components/src/components/code-block/copy-button.tsx
index ca42c5c8..560a0f47 100644
--- a/packages/components/src/components/code-block/copy-button.tsx
+++ b/packages/components/src/components/code-block/copy-button.tsx
@@ -1,6 +1,6 @@
+import { cn } from "cn";
 import { type ComponentPropsWithoutRef, useEffect, useState } from "react";
 import { ActiveCopyButtonIcon, CopyButtonIcon } from "@/icons";
-import { cn } from "@/utils/cn";
 import {
   type CopyToClipboardResult,
   copyToClipboard,
diff --git a/packages/components/src/components/code-group/code-group-select.tsx b/packages/components/src/components/code-group/code-group-select.tsx
index edf41802..0c33e315 100644
--- a/packages/components/src/components/code-group/code-group-select.tsx
+++ b/packages/components/src/components/code-group/code-group-select.tsx
@@ -1,5 +1,5 @@
+import { cn } from "cn";
 import { type ReactNode, useEffect, useMemo, useState } from "react";
-import { cn } from "@/utils/cn";
 import type { CodeBlockTheme, CodeStyling } from "@/utils/shiki/code-styling";
 import { BaseCodeBlock } from "../code-block/base-code-block";
 import {
diff --git a/packages/components/src/components/code-group/code-group.tsx b/packages/components/src/components/code-group/code-group.tsx
index c41ce8ad..9594da9a 100644
--- a/packages/components/src/components/code-group/code-group.tsx
+++ b/packages/components/src/components/code-group/code-group.tsx
@@ -1,4 +1,5 @@
 import { Tabs } from "@base-ui/react/tabs";
+import { cn } from "cn";
 import React, {
   forwardRef,
   type ReactElement,
@@ -8,7 +9,6 @@ import React, {
   useRef,
   useState,
 } from "react";
-
 import { BaseCodeBlock } from "@/components/code-block/base-code-block";
 import type { CodeBlockProps } from "@/components/code-block/code-block";
 import {
@@ -17,7 +17,6 @@ import {
 } from "@/components/code-block/copy-button";
 import { Icon as ComponentIcon } from "@/components/icon";
 import { Classes } from "@/constants/selectors";
-import { cn } from "@/utils/cn";
 import type { CodeBlockTheme, CodeStyling } from "@/utils/shiki/code-styling";
 import { getCodeString } from "@/utils/shiki/lib";
 
diff --git a/packages/components/src/components/code-group/code-select-dropdown.tsx b/packages/components/src/components/code-group/code-select-dropdown.tsx
index 15e2fad1..f7c51a79 100644
--- a/packages/components/src/components/code-group/code-select-dropdown.tsx
+++ b/packages/components/src/components/code-group/code-select-dropdown.tsx
@@ -1,7 +1,6 @@
+import { cn } from "cn";
 import { ChevronDownIcon } from "lucide-react";
 
-import { cn } from "@/utils/cn";
-
 import {
   DropdownMenu,
   DropdownMenuContent,
diff --git a/packages/components/src/components/code-group/dropdown.tsx b/packages/components/src/components/code-group/dropdown.tsx
index 63065050..6dc1ea98 100644
--- a/packages/components/src/components/code-group/dropdown.tsx
+++ b/packages/components/src/components/code-group/dropdown.tsx
@@ -1,7 +1,7 @@
 import { Menu } from "@base-ui/react/menu";
+import { cn } from "cn";
 import { CheckIcon } from "lucide-react";
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
-import { cn } from "@/utils/cn";
 
 type DropdownMenuProps = {
   children: ReactNode;
diff --git a/packages/components/src/components/code-group/language-dropdown.tsx b/packages/components/src/components/code-group/language-dropdown.tsx
index 129fdfff..1ffb8020 100644
--- a/packages/components/src/components/code-group/language-dropdown.tsx
+++ b/packages/components/src/components/code-group/language-dropdown.tsx
@@ -1,7 +1,6 @@
+import { cn } from "cn";
 import { ChevronsUpDownIcon } from "lucide-react";
 import { useState } from "react";
-
-import { cn } from "@/utils/cn";
 import type { CodeBlockTheme } from "@/utils/shiki/code-styling";
 import { getDisplayName } from "@/utils/shiki/snippet-presets";
 
diff --git a/packages/components/src/components/code-group/language-icon.tsx b/packages/components/src/components/code-group/language-icon.tsx
index e7906786..8d4b6b96 100644
--- a/packages/components/src/components/code-group/language-icon.tsx
+++ b/packages/components/src/components/code-group/language-icon.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/utils/cn";
+import { cn } from "cn";
 import { getLanguageIconUrl } from "@/utils/icon-utils";
 
 type LanguageIconProps = {
diff --git a/packages/components/src/components/color/color.tsx b/packages/components/src/components/color/color.tsx
index c3d4e9a3..2cd8c7d7 100644
--- a/packages/components/src/components/color/color.tsx
+++ b/packages/components/src/components/color/color.tsx
@@ -1,9 +1,9 @@
+import { cn } from "cn";
 import type React from "react";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { Classes } from "@/constants/selectors";
 import { useIsDarkTheme } from "@/hooks/use-is-dark-theme";
 import { CheckIcon } from "@/icons";
-import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy-to-clipboard";
 import { Tooltip } from "../tooltip";
 import type { ColorVariant } from "./constants";
diff --git a/packages/components/src/components/columns/columns.tsx b/packages/components/src/components/columns/columns.tsx
index 0fadba70..ab620b84 100644
--- a/packages/components/src/components/columns/columns.tsx
+++ b/packages/components/src/components/columns/columns.tsx
@@ -1,6 +1,6 @@
+import { cn } from "cn";
 import type React from "react";
 import { Classes } from "@/constants/selectors";
-import { cn } from "@/utils/cn";
 import type { ColCount } from "./constants";
 import { DEFAULT_COLS } from "./constants";
 
diff --git a/packages/components/src/components/expandable/expandable.tsx b/packages/components/src/components/expandable/expandable.tsx
index 77bbd0b4..9d14cfd0 100644
--- a/packages/components/src/components/expandable/expandable.tsx
+++ b/packages/components/src/components/expandable/expandable.tsx
@@ -1,3 +1,4 @@
+import { cn } from "cn";
 import {
   type ReactNode,
   type RefObject,
@@ -9,7 +10,6 @@ import {
 import { Icon } from "@/components/icon";
 import { Classes } from "@/constants/selectors";
 import { useExpandableMemory } from "@/hooks/use-expandable-memory";
-import { cn } from "@/utils/cn";
 
 const EXPANDABLE_CONTENT_CLASS = "expandable-content";
 const DEFAULT_OPENED_TEXT = "Hide";
diff --git a/packages/components/src/components/frame/frame.tsx b/packages/components/src/components/frame/frame.tsx
index fb4c4708..f77efbfe 100644
--- a/packages/components/src/components/frame/frame.tsx
+++ b/packages/components/src/components/frame/frame.tsx
@@ -1,7 +1,6 @@
+import { cn } from "cn";
 import type { CSSProperties, ReactNode } from "react";
-
 import { Classes } from "@/constants/selectors";
-import { cn } from "@/utils/cn";
 import { enhanceVideoProps } from "@/utils/enhance-video-props";
 
 type FrameProps = {
diff --git a/packages/components/src/components/icon/icon.tsx b/packages/components/src/components/icon/icon.tsx
index f181928a..2ed281b8 100644
--- a/packages/components/src/components/icon/icon.tsx
+++ b/packages/components/src/components/icon/icon.tsx
@@ -1,9 +1,9 @@
 /** biome-ignore-all lint/complexity/noExcessiveCognitiveComplexity: TODO */
-import type { CSSProperties } from "react";
 
+import { cn } from "cn";
+import type { CSSProperties } from "react";
 import { MINTLIFY_ICONS_CDN_URL } from "@/constants";
 import { Classes } from "@/constants/selectors";
-import { cn } from "@/utils/cn";
 import {
   getIconUrl,
   ICON_TYPES,
diff --git a/packages/components/src/components/mermaid/mermaid.tsx b/packages/components/src/components/mermaid/mermaid.tsx
index 464fb650..a18d8762 100644
--- a/packages/components/src/components/mermaid/mermaid.tsx
+++ b/packages/components/src/components/mermaid/mermaid.tsx
@@ -1,8 +1,8 @@
+import { cn } from "cn";
 import mermaid, { type MermaidConfig } from "mermaid";
 import { useEffect, useId, useRef, useState } from "react";
 import { Classes } from "@/constants/selectors";
 import { useIsDarkTheme } from "@/hooks/use-is-dark-theme";
-import { cn } from "@/utils/cn";
 import { makeMarkerIdsUnique } from "@/utils/make-marker-ids-unique";
 import { usePanZoom } from "./use-pan-zoom";
 import { ZoomControls } from "./zoom-controls";
diff --git a/packages/components/src/components/mermaid/zoom-controls.tsx b/packages/components/src/components/mermaid/zoom-controls.tsx
index ce73cd67..d4791459 100644
--- a/packages/components/src/components/mermaid/zoom-controls.tsx
+++ b/packages/components/src/components/mermaid/zoom-controls.tsx
@@ -1,3 +1,4 @@
+import { cn } from "cn";
 import {
   ChevronDownIcon,
   ChevronLeftIcon,
@@ -8,8 +9,6 @@ import {
   ZoomOutIcon,
 } from "lucide-react";
 import type { ComponentProps } from "react";
-
-import { cn } from "@/utils/cn";
 import type { MermaidPlacement } from "./mermaid";
 
 const Button = ({
diff --git a/packages/components/src/components/panel/panel.tsx b/packages/components/src/components/panel/panel.tsx
index 7ffab8ff..2f9b975a 100644
--- a/packages/components/src/components/panel/panel.tsx
+++ b/packages/components/src/components/panel/panel.tsx
@@ -1,5 +1,5 @@
+import { cn } from "cn";
 import type { ComponentProps } from "react";
-import { cn } from "@/utils/cn";
 
 type PanelProps = ComponentProps<"div">;
 
diff --git a/packages/components/src/components/property/param-head.tsx b/packages/components/src/components/property/param-head.tsx
index 37bac1c7..b7bf2cb4 100644
--- a/packages/components/src/components/property/param-head.tsx
+++ b/packages/components/src/components/property/param-head.tsx
@@ -1,7 +1,7 @@
 import slugify from "@sindresorhus/slugify";
+import { cn } from "cn";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { LinkIcon } from "@/icons";
-import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy-to-clipboard";
 import { DeprecatedPill, InfoPill, RequiredPill } from "./pills";
 import type { PropertyProps } from "./property";
diff --git a/packages/components/src/components/property/pills.tsx b/packages/components/src/components/property/pills.tsx
index 083146f4..d1287e60 100644
--- a/packages/components/src/components/property/pills.tsx
+++ b/packages/components/src/components/property/pills.tsx
@@ -1,5 +1,5 @@
+import { cn } from "cn";
 import type React from "react";
-import { cn } from "@/utils/cn";
 
 type InfoPillProps = {
   children: React.ReactNode;
diff --git a/packages/components/src/components/property/property.tsx b/packages/components/src/components/property/property.tsx
index e6f8ca5b..0fb08e7c 100644
--- a/packages/components/src/components/property/property.tsx
+++ b/packages/components/src/components/property/property.tsx
@@ -1,7 +1,7 @@
+import { cn } from "cn";
 import { type ReactNode, useMemo } from "react";
 import { MAX_DEFAULT_VALUE_LENGTH } from "@/constants";
 import { Classes } from "@/constants/selectors";
-import { cn } from "@/utils/cn";
 import { ParamHead } from "./param-head";
 
 type PropertyProps = {
diff --git a/packages/components/src/components/search/button.tsx b/packages/components/src/components/search/button.tsx
index c7ed0baf..82e91e95 100644
--- a/packages/components/src/components/search/button.tsx
+++ b/packages/components/src/components/search/button.tsx
@@ -1,6 +1,6 @@
+import { cn } from "cn";
 import { SearchIcon } from "lucide-react";
 import { type ButtonHTMLAttributes, forwardRef } from "react";
-import { cn } from "../../utils/cn";
 import { useSearch } from "./provider";
 
 type SearchButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
diff --git a/packages/components/src/components/search/search.tsx b/packages/components/src/components/search/search.tsx
index 57720e1e..8439d76b 100644
--- a/packages/components/src/components/search/search.tsx
+++ b/packages/components/src/components/search/search.tsx
@@ -8,6 +8,7 @@ import {
   Transition,
   TransitionChild,
 } from "@headlessui/react";
+import { cn } from "cn";
 import {
   ChevronRightIcon,
   Loader2Icon,
@@ -25,7 +26,6 @@ import {
   useRef,
   useState,
 } from "react";
-import { cn } from "../../utils/cn";
 
 type SearchResult = {
   id: string;
diff --git a/packages/components/src/components/steps/steps.tsx b/packages/components/src/components/steps/steps.tsx
index d64cb9d0..32bee628 100644
--- a/packages/components/src/components/steps/steps.tsx
+++ b/packages/components/src/components/steps/steps.tsx
@@ -1,10 +1,10 @@
+import { cn } from "cn";
 import type React from "react";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
 import { type Rect, useRect } from "react-use-rect";
 import { Icon } from "@/components/icon";
 import { Classes } from "@/constants/selectors";
 import { LinkIcon } from "@/icons";
-import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy-to-clipboard";
 import type { IconLibrary, IconType } from "@/utils/icon-utils";
 import { STEP_TITLE_SIZES, type StepTitleSize } from "./constants";
diff --git a/packages/components/src/components/tabs/tabs.tsx b/packages/components/src/components/tabs/tabs.tsx
index 1b273a9e..38624d7b 100644
--- a/packages/components/src/components/tabs/tabs.tsx
+++ b/packages/components/src/components/tabs/tabs.tsx
@@ -1,3 +1,4 @@
+import { cn } from "cn";
 import {
   Children,
   isValidElement,
@@ -18,7 +19,6 @@ import {
   CHILD_TAB_IDS_ATTRIBUTE,
 } from "@/constants";
 import { Classes } from "@/constants/selectors";
-import { cn } from "@/utils/cn";
 import type { IconLibrary, IconType } from "@/utils/icon-utils";
 import { slugify } from "@/utils/slugify";
 
diff --git a/packages/components/src/components/tile/tile.tsx b/packages/components/src/components/tile/tile.tsx
index 92034002..2debe679 100644
--- a/packages/components/src/components/tile/tile.tsx
+++ b/packages/components/src/components/tile/tile.tsx
@@ -1,5 +1,5 @@
+import { cn } from "cn";
 import { Classes } from "@/constants/selectors";
-import { cn } from "@/utils/cn";
 import { isRemoteUrl } from "@/utils/is-remote-url";
 
 const SIZE = 24;
diff --git a/packages/components/src/components/tooltip/tooltip.tsx b/packages/components/src/components/tooltip/tooltip.tsx
index 25bd357c..9c103bf9 100644
--- a/packages/components/src/components/tooltip/tooltip.tsx
+++ b/packages/components/src/components/tooltip/tooltip.tsx
@@ -1,10 +1,10 @@
 import type { TooltipPositionerProps } from "@base-ui/react/tooltip";
 import { Tooltip as TooltipBaseUI } from "@base-ui/react/tooltip";
+import { cn } from "cn";
 import { ChevronRightIcon } from "lucide-react";
 import { isValidElement, type ReactNode, useMemo, useState } from "react";
 import { Classes } from "@/constants/selectors";
 import { useHasHover } from "@/hooks/use-has-hover";
-import { cn } from "@/utils/cn";
 import { isRemoteUrl } from "@/utils/is-remote-url";
 import { renderAsChild } from "@/utils/render-as-child";
 
diff --git a/packages/components/src/components/tree/file.tsx b/packages/components/src/components/tree/file.tsx
index 6c31002c..4f420c9f 100644
--- a/packages/components/src/components/tree/file.tsx
+++ b/packages/components/src/components/tree/file.tsx
@@ -1,7 +1,7 @@
+import { cn } from "cn";
 import type { CSSProperties } from "react";
 import { Classes } from "@/constants/selectors";
 import { FileIcon } from "@/icons";
-import { cn } from "@/utils/cn";
 
 import { useTreeLevel } from "./use-tree-level";
 import { calculatePaddingLeft } from "./utils";
diff --git a/packages/components/src/components/tree/folder.tsx b/packages/components/src/components/tree/folder.tsx
index 6061cc75..de1304c7 100644
--- a/packages/components/src/components/tree/folder.tsx
+++ b/packages/components/src/components/tree/folder.tsx
@@ -1,7 +1,7 @@
+import { cn } from "cn";
 import { type CSSProperties, type ReactNode, useId, useState } from "react";
 import { Classes } from "@/constants/selectors";
 import { Folder2Icon, Folder2OpenIcon } from "@/icons";
-import { cn } from "@/utils/cn";
 
 import { TreeLevelProvider } from "./context";
 import { useTreeLevel } from "./use-tree-level";
diff --git a/packages/components/src/components/tree/root.tsx b/packages/components/src/components/tree/root.tsx
index 118778cf..e080df00 100644
--- a/packages/components/src/components/tree/root.tsx
+++ b/packages/components/src/components/tree/root.tsx
@@ -1,4 +1,6 @@
 /** biome-ignore-all lint/complexity/noExcessiveCognitiveComplexity: TODO */
+
+import { cn } from "cn";
 import {
   type FocusEvent,
   type KeyboardEvent,
@@ -7,9 +9,7 @@ import {
   useEffect,
   useRef,
 } from "react";
-
 import { Classes } from "@/constants/selectors";
-import { cn } from "@/utils/cn";
 
 import { TreeLevelProvider } from "./context";
 import {
diff --git a/packages/components/src/components/update/update.tsx b/packages/components/src/components/update/update.tsx
index a29744ec..ccdb6ec7 100644
--- a/packages/components/src/components/update/update.tsx
+++ b/packages/components/src/components/update/update.tsx
@@ -1,3 +1,4 @@
+import { cn } from "cn";
 import {
   type ComponentPropsWithoutRef,
   forwardRef,
@@ -9,7 +10,6 @@ import {
 import { type Rect, useRect } from "react-use-rect";
 import { Classes } from "@/constants/selectors";
 import { LinkIcon } from "@/icons";
-import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy-to-clipboard";
 
 type UpdatePropsBase = {
diff --git a/packages/components/src/components/view/view.tsx b/packages/components/src/components/view/view.tsx
index 18099ce8..2fa69e29 100644
--- a/packages/components/src/components/view/view.tsx
+++ b/packages/components/src/components/view/view.tsx
@@ -1,8 +1,7 @@
+import { cn } from "cn";
 import { type ComponentPropsWithoutRef, forwardRef, useState } from "react";
-
 import { Classes } from "@/constants/selectors";
 import { useIsomorphicLayoutEffect } from "@/hooks/use-isomorphic-layout-effect";
-import { cn } from "@/utils/cn";
 import type { MultiViewItemType } from "@/utils/icon-utils";
 
 type ViewPropsBase = {
diff --git a/packages/components/src/icons/index.tsx b/packages/components/src/icons/index.tsx
index 1ac9db00..326b7dfe 100644
--- a/packages/components/src/icons/index.tsx
+++ b/packages/components/src/icons/index.tsx
@@ -1,6 +1,5 @@
+import { cn } from "cn";
 import type { SVGProps } from "react";
-
-import { cn } from "@/utils/cn";
 import type { CodeBlockTheme } from "@/utils/shiki/code-styling";
 
 const InfoIcon = ({
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 67d470ff..7ef77a74 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,2 +1,2 @@
+export { cn } from "cn";
 export * from "./components";
-export { cn } from "./utils/cn";
diff --git a/packages/components/src/utils/cn.ts b/packages/components/src/utils/cn.ts
deleted file mode 100644
index 7c2be8ed..00000000
--- a/packages/components/src/utils/cn.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-const cn = (...inputs: ClassValue[]) => {
-  return twMerge(clsx(inputs));
-};
-
-export { cn };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 03907fbe..57448aee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,9 +29,9 @@ importers:
       '@sindresorhus/slugify':
         specifier: 2.2.1
         version: 2.2.1
-      clsx:
-        specifier: 2.1.1
-        version: 2.1.1
+      cn:
+        specifier: ^0.2.4
+        version: 0.2.4
       color:
         specifier: 4.2.3
         version: 4.2.3
@@ -56,9 +56,6 @@ importers:
       shiki:
         specifier: 3.21.0
         version: 3.21.0
-      tailwind-merge:
-        specifier: 2.6.0
-        version: 2.6.0
     devDependencies:
       '@shikijs/types':
         specifier: 3.21.0
@@ -1788,6 +1785,11 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  cn@0.2.4:
+    resolution: {integrity: sha512-SzQvoh5FwizWtQg9+JueKdjWhlfCZMdu5DqNHm9q1wUlRVmKb9WXlepR9bTTbPwzEOyX1ujJ6lcCppmn3bNUCg==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -2145,6 +2147,7 @@ packages:
   eslint@9.39.1:
     resolution: {integrity: sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
     peerDependencies:
       jiti: '*'
@@ -3024,9 +3027,6 @@ packages:
   tabbable@6.4.0:
     resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
 
-  tailwind-merge@2.6.0:
-    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
-
   tailwindcss@4.1.18:
     resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
 
@@ -4886,6 +4886,8 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  cn@0.2.4: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -6156,8 +6158,6 @@ snapshots:
 
   tabbable@6.4.0: {}
 
-  tailwind-merge@2.6.0: {}
-
   tailwindcss@4.1.18: {}
 
   tapable@2.3.0: {}