Add Utilities

Install dependencies

npm install clsx tailwind-merge motion

Add the util file

Save this as lib/utils.ts — it is the exact helper Kick UI examples import:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Use the utility

Use cn anywhere you need conditional classes that still merge Tailwind conflicts cleanly:

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

export function Example({ active }: { active: boolean }) {
  return (
    <div
      className={cn(
        "rounded-md border px-4 py-2 text-sm",
        active && "border-neutral-950 bg-neutral-950 text-white"
      )}
    >
      Kick UI
    </div>
  );
}

Motion on React 19

Kick UI uses stable motion (v12), which supports React 19 out of the box — no alpha builds and no overrides block needed. That workaround belonged to the Next 15 / React 19 release-candidate era; do not copy it into a current project. Components that need anything beyond these three packages show their exact install command on their own component page.