@neynar/ui/docs/llm/components/utilities.md

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

# Utilities

Essential utility components, hooks, and functions for building responsive and accessible interfaces.

## Components

### ThemeToggle
Theme switching component with light/dark mode support.

```tsx
import { ThemeToggle } from "@neynar/ui"

export function Header() {
  return (
    <div className="flex items-center justify-between p-4">
      <h1>My App</h1>
      <ThemeToggle />
    </div>
  )
}
```

### ScrollArea
Custom scrollable container with styled scrollbars.

```tsx
import { ScrollArea } from "@neynar/ui"

export function MessageList({ messages }) {
  return (
    <ScrollArea className="h-96 w-full border rounded-md p-4">
      {messages.map((message) => (
        <div key={message.id} className="mb-2">{message.text}</div>
      ))}
    </ScrollArea>
  )
}
```

### Resizable
Resizable panels with drag handles.

```tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@neynar/ui"

export function Layout() {
  return (
    <ResizablePanelGroup direction="horizontal">
      <ResizablePanel defaultSize={25}>Sidebar</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={75}>Main Content</ResizablePanel>
    </ResizablePanelGroup>
  )
}
```

## Hooks

### useTheme
Theme management hook for dark/light mode.

```tsx
import { useTheme } from "@neynar/ui"

export function CustomThemeToggle() {
  const { theme, setTheme } = useTheme()
  
  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      Current: {theme}
    </button>
  )
}
```

### useMobile
Responsive design hook for mobile detection.

```tsx
import { useMobile } from "@neynar/ui"

export function ResponsiveComponent() {
  const isMobile = useMobile()
  
  return (
    <div className={isMobile ? "grid-cols-1" : "grid-cols-3"}>
      Content adapts to screen size
    </div>
  )
}
```

## Utils

### cn
Class name utility for conditional styling.

```tsx
import { cn } from "@neynar/ui"

export function Button({ variant, className, ...props }) {
  return (
    <button
      className={cn(
        "px-4 py-2 rounded",
        variant === "primary" && "bg-blue-500 text-white",
        variant === "secondary" && "bg-gray-200",
        className
      )}
      {...props}
    />
  )
}
```