@neynar/ui/llm-docs/cn.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# cn

**Type**: function

cn - Combines class names with Tailwind CSS conflict resolution This utility function combines multiple class names into a single string, automatically resolving Tailwind CSS class conflicts. It uses clsx for conditional class handling and tailwind-merge to ensure later classes override earlier ones when they conflict.

## API Surface

```typescript
import { cn } from '@neynar/ui';

export function cn(inputs: ClassValue[]): void { ... }
```

## Parameters

### inputs
- **Type**: `ClassValue[]`
- **Required**: Yes
- **Description**: Class names to combine. Can be strings, objects, arrays,
## Returns

- **Description**: A single string of combined and merged class names
## Examples

### Example 1
```tsx
// Basic usage
cn("px-2 py-1", "bg-blue-500", "text-white")
// Returns: "px-2 py-1 bg-blue-500 text-white"
```
### Example 2
```tsx
// With conditional classes
cn(
  "base-class",
  isActive && "active-class",
  isDisabled && "disabled-class"
)
```
### Example 3
```tsx
// Overriding Tailwind classes
cn("px-4", "px-2") // Returns: "px-2" (later class wins)
cn("text-red-500", "text-blue-500") // Returns: "text-blue-500"
```