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

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

# Toaster

**Type**: component

Toast notification container component built on Sonner A feature-rich toast component that provides beautiful, accessible notifications with seamless theme integration and extensive customization options. Built on the popular Sonner library with enhanced theming that automatically synchronizes with the application's theme system using the useTheme hook. This component serves as the central toast container and should be placed once in your application root. It manages the display, positioning, and lifecycle of all toast notifications throughout your application. **Key Features:** - **Automatic theme synchronization** - Integrates with useTheme for consistent styling - **Flexible positioning** - Six different positions with smart stacking - **Rich accessibility** - Full keyboard navigation and screen reader support - **Promise integration** - Built-in loading/success/error states for async operations - **Gesture support** - Touch-friendly swipe-to-dismiss with configurable directions - **Performance optimized** - Efficient rendering with configurable limits - **Customizable styling** - Comprehensive theming and custom icon support

## JSX Usage

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

<Toaster
  invert={true}
  theme={value}
  position={value}
  hotkey={[]}
  richColors={true}
  expand={true}
  duration={0}
  gap={0}
  visibleToasts={0}
  closeButton={true}
  toastOptions={value}
  className="value"
  style={value}
  offset={value}
  mobileOffset={value}
  dir={value}
  swipeDirections={[]}
  icons={value}
  containerAriaLabel="value"
/>
```

## Component Props

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

### theme
- **Type**: `"light" | "dark" | "system"`
- **Required**: No
- **Description**: No description available

### position
- **Type**: `| "top-left"
    | "top-right"
    | "bottom-left"
    | "bottom-right"
    | "top-center"
    | "bottom-center"`
- **Required**: No
- **Description**: No description available

### hotkey
- **Type**: `string[]`
- **Required**: No
- **Description**: No description available

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

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

### duration
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### gap
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### visibleToasts
- **Type**: `number`
- **Required**: No
- **Description**: No description available

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

### toastOptions
- **Type**: `{
    /** Additional CSS classes for toast elements */
    className?: string;
    /** Show close button for individual toasts @default false */
    closeButton?: boolean;
    /** CSS classes for description text */
    descriptionClassName?: string;
    /** Inline styles for toast container */
    style?: React.CSSProperties;
    /** Styles for cancel button */
    cancelButtonStyle?: React.CSSProperties;
    /** Styles for action button */
    actionButtonStyle?: React.CSSProperties;
    /** Duration before auto-dismiss in milliseconds */
    duration?: number;
    /** Remove default styling to allow full custom styling @default false */
    unstyled?: boolean;
    /** CSS class overrides for specific toast elements */
    classNames?: {
      toast?: string;
      title?: string;
      description?: string;
      loader?: string;
      closeButton?: string;
      cancelButton?: string;
      actionButton?: string;
      success?: string;
      error?: string;
      info?: string;
      warning?: string;
      loading?: string;
      default?: string;
      content?: string;
      icon?: string;
    };
    /** Accessible label for close button */
    closeButtonAriaLabel?: string;
  }`
- **Required**: No
- **Description**: No description available

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### style
- **Type**: `React.CSSProperties`
- **Required**: No
- **Description**: No description available

### offset
- **Type**: `| string
    | number
    | {
        top?: string | number;
        right?: string | number;
        bottom?: string | number;
        left?: string | number;
      }`
- **Required**: No
- **Description**: No description available

### mobileOffset
- **Type**: `| string
    | number
    | {
        top?: string | number;
        right?: string | number;
        bottom?: string | number;
        left?: string | number;
      }`
- **Required**: No
- **Description**: No description available

### dir
- **Type**: `"rtl" | "ltr" | "auto"`
- **Required**: No
- **Description**: No description available

### swipeDirections
- **Type**: `("top" | "right" | "bottom" | "left")[]`
- **Required**: No
- **Description**: No description available

### icons
- **Type**: `{
    success?: React.ReactNode;
    info?: React.ReactNode;
    warning?: React.ReactNode;
    error?: React.ReactNode;
    loading?: React.ReactNode;
    close?: React.ReactNode;
  }`
- **Required**: No
- **Description**: No description available

### containerAriaLabel
- **Type**: `string`
- **Required**: No
- **Description**: No description available