cn Utility
Conditionally merge Tailwind CSS classnames and strip duplicate utilities.
The cn utility joins string classes, evaluates conditional expressions, and merges Tailwind CSS classes to prevent specificity collisions (similar to standard clsx and tailwind-merge implementations).
Import
import { cn } from 'boltdocs/client'
Signature
function cn(...inputs: ClassValue[]): string
Parameters
inputs: Any combination of strings, boolean conditionals, nested arrays, or object maps.
Example: Building a Button Component
import { cn } from 'boltdocs/client'
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary'
isLoading?: boolean
}
export function CustomButton({ variant = 'primary', isLoading, className, children, ...props }: ButtonProps) {
return (
<button
className={cn(
'px-4 py-2 rounded font-medium transition-colors duration-150',
variant === 'primary' && 'bg-blue-600 text-white hover:bg-blue-700',
variant === 'secondary' && 'bg-zinc-200 text-zinc-800 hover:bg-zinc-300',
isLoading && 'opacity-50 cursor-not-allowed',
className // Allows users to override base styles
)}
disabled={isLoading}
{...props}
>
{children}
</button>
)
}
Last updated on July 27, 2026