chore: replace clsx and tailwind-merge with cn

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

packages/components/package.json

@@ -63,16 +63,15 @@
     "@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",
     "lodash": "4.18.1",
     "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",

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;

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;

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

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

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 =

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

packages/components/src/components/code-block/base-code-block.tsx

@@ -1,13 +1,12 @@
+import { cn } from "cn";
 import type React from "react";
-
 import {
   DEFAULT_EXPANDABLE_CODE_BLOCK_HEIGHT,
   SMALL_EXPANDABLE_CODE_BLOCK_HEIGHT,
   SMALL_EXPANDABLE_NUMBER_OF_LINES,
   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";
 

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

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

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,

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 {

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

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,

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;

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

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

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

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

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

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

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,

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

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

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

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

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;

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

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

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;

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

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

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;

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

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