Skip to Content
Componentscn (class names)

cn (class names)

Utility to merge Tailwind class strings without conflicts — same pattern as shadcn cn().

Import

import { cn } from '@sumx/ui';

Usage

<div className={cn('px-4 py-2', isActive && 'bg-primary', className)} />

Implementation: clsx + tailwind-merge so later utilities win (e.g. p-2 + p-4 → p-4).

When to use

  • Inside custom components in the host app that should match kit styling.
  • Prefer cn from @sumx/ui in kit-related code so you do not duplicate tailwind-merge versions.

Not a component

cn is the only non-UI export in the components section; see Components overview for Button / Dialog.

PermissionsOverview