cn utility
Conditionally combine Tailwind CSS classes and de-duplicate utilities.
The cn utility joins string classes, evaluates conditional expressions, and merges Tailwind CSS classes to prevent specificity collisions (similar to the standard clsx and tailwind-merge implementations).
Signature
ts
function cn(...inputs: ClassValue[]): string
Parameters
inputs: Any combination of strings, boolean conditionals, nested arrays, or object maps.
Example: Building a Button Component
tsx
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 October 18, 2026
