September 2026 - cn

The shadcn-svelte cn utility now uses the cn package.

For years, every project started with the same helper in lib/utils.ts: import clsx, import twMerge, wrap one in the other, and export it as cn. It worked, but it meant two dependencies and a helper to maintain in every project and registry.

That implementation now lives in a package. cn is a drop-in replacement for twMerge(clsx(...)) with the same API, so nothing changes at the call site.

<script lang="ts">
  import { cn } from "$lib/utils.js";
 
  let { class: className } = $props();
</script>
 
<div class={cn("flex items-center", className)}></div>

What changed #

• The shared utils registry item re-exports cn from the cn package instead of defining a local twMerge(clsx(...)) wrapper.
• shadcn-svelte init installs cn through the registry's utils dependency.
• Components keep importing cn through the configured utils alias, so your existing imports continue to work.

lib/utils.ts #

The utils registry item still exists. It re-exports cn alongside the Svelte helper types, so you still have a single place for project helpers.

export { cn } from "cn";
 
// Keep your existing helper types and other utilities here.

Existing projects #

Your existing cn helper keeps working. To use the package in your own project, install cn:

pnpm i cn

npm i cn

yarn install cn

bun install cn

Then replace the clsx and tailwind-merge imports and the local cn function in your utils file with export { cn } from "cn";. Keep your other utilities and Svelte helper types in place.

Once nothing else in your project imports clsx or tailwind-merge, you can remove those dependencies.