@neynar/ui/llm-docs/theme-toggle.llm.md

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

# ThemeToggle

**Type**: component

ThemeToggle - A zero-configuration theme switcher with system, light, and dark modes A completely self-contained theme toggle component that provides an intuitive dropdown interface for switching between system preference, light mode, and dark mode. Works immediately without any provider setup, context configuration, or additional dependencies. Built on top of shadcn/ui components (Button + DropdownMenu) with the Neynar useTheme hook for state management. Handles theme persistence via cookies, system preference detection, real-time system changes, and synchronization across multiple instances. **Zero Configuration Design:** Just import and use - no providers, no setup, no configuration required. The component handles all theme management internally and provides a complete solution out of the box. **Perfect for:** - Application headers and navigation bars - Settings panels and preference screens - Toolbars and floating action areas - Any location where users need quick theme access

## JSX Usage

```jsx
import { ThemeToggle } from '@neynar/ui';

<ThemeToggle
  variant={value}
  size={value}
  className="value"
  showLabel={true}
  align={value}
  asChild={true}
/>
```

## Component Props

### variant
- **Type**: `| "default"
    | "destructive"
    | "outline"
    | "secondary"
    | "ghost"
    | "link"`
- **Required**: No
- **Description**: Visual style variant inherited from Button component (default: "outline")

### size
- **Type**: `"default" | "sm" | "lg" | "icon"`
- **Required**: No
- **Description**: Size variant inherited from Button component (default: "icon")

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes for custom styling

### showLabel
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether to show theme name text (auto-enabled for non-icon sizes)

### align
- **Type**: `"start" | "center" | "end"`
- **Required**: No
- **Description**: Dropdown menu alignment relative to trigger button (default: "end")

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available