Foundation

Utils

The cn class merger, taught the theme's custom radius, shadow and animation names.

Preview

cn("rounded-panel p-2", "rounded-none")

p-2 rounded-none

Install

pnpm dlx shadcn@latest add @abnormal/utils

Brings incn@^0.5.0

Usage

import { cn } from "@/lib/utils";

export default function UtilsDemo() {
  return (
    <div className="grid w-full gap-2 font-mono text-sm">
      <p className="text-muted-foreground">cn(&quot;rounded-panel p-2&quot;, &quot;rounded-none&quot;)</p>
      <p>{cn("rounded-panel p-2", "rounded-none")}</p>
    </div>
  );
}

Source

import { createCn } from "cn/config";

/**
 * The custom radius, shadow and animation names in the theme. cn only knows Tailwind's built-in scale: unregistered,
 * `cn("rounded-panel", "rounded-none")` keeps both and the panel radius wins in the CSS.
 * Add new --radius-*, --shadow-* and --animate-* tokens here too (tests/registry.test.ts checks them against the theme).
 */
export const CN_THEME = {
  radius: ["chip", "control", "mark", "dialog", "panel"],
  shadow: ["panel", "popover"],
  animate: [
    "arrive",
    "leave",
    "fade-in",
    "fade-out",
    "slide-in-right",
    "slide-out-right",
    "slide-in-left",
    "slide-out-left",
    "flash",
    "pop",
  ],
};

export const cn = createCn({ extend: { theme: CN_THEME } });