### Install ask-sonner skill via npx

Source: https://github.com/emilkowalski/sonner/blob/main/README.md

Add the ask-sonner skill to assist with installation and answer Sonner-related questions.

```bash
npx skills add https://github.com/emilkowalski/skills --skill ask-sonner
```

--------------------------------

### Install sonner via npm

Source: https://github.com/emilkowalski/sonner/blob/main/README.md

Install the sonner package into your project using npm.

```bash
npm install sonner
```

--------------------------------

### Render Toaster component and trigger a toast

Source: https://github.com/emilkowalski/sonner/blob/main/README.md

Mount the `<Toaster />` component where toasts will be rendered in your app, then trigger notifications from anywhere using `toast()`.

```jsx
import { Toaster, toast } from 'sonner';

// ...

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast('My first toast')}>Give me a toast</button>
    </div>
  );
}
```

--------------------------------

### Track asynchronous operations with toast.promise

Source: https://github.com/emilkowalski/sonner/blob/main/_autodocs/api-reference/toast.md

Displays loading, success, and error states based on promise resolution or rejection. Use unwrap() to return a promise resolving with the original data or rejecting with the original error.

```tsx
toast.promise(fetchUser(), {
  loading: 'Loading user…',
  success: (user) => `Welcome, ${user.name}!`,
  error: (err) => `Failed to load user: ${err.message}`,
});

// with unwrap to continue the flow / catch errors yourself:
const result = await toast
  .promise(save(data), {
    loading: 'Saving…',
    success: 'Saved.',
    error: 'Save failed.',
  })
  .unwrap();
```

--------------------------------

### toast.custom

Source: https://github.com/emilkowalski/sonner/blob/main/_autodocs/api-reference/toast.md

Renders a fully custom JSX element as a toast, receiving the toast ID to allow programmatic updates or dismissals from within the component.

```APIDOC
### toast.custom(jsx, data)

Renders fully custom JSX inside a toast.

#### Signature
```ts
(jsx: (id: number | string) => React.ReactElement, data?: ExternalToast) => number | string
```

#### Parameters
- **jsx** (`(id: number | string) => React.ReactElement`) - Required - Render function receiving the generated toast ID.
- **data** (`ExternalToast`) - Optional - Additional toast configuration properties.

#### Example
```tsx
const id = toast.custom((id) => (
  <div>
    <button onClick={() => toast.dismiss(id)}>Close</button>
    <span>Custom content</span>
  </div>
));
```
```

--------------------------------

### Render custom JSX with toast.custom

Source: https://github.com/emilkowalski/sonner/blob/main/_autodocs/api-reference/toast.md

Renders fully custom JSX where the callback provides the toast ID for self-dismissal or internal updates. Custom toasts have no type and reset any existing toast type.

```tsx
const id = toast.custom((id) => (
  <div>
    <button onClick={() => toast.dismiss(id)}>Close</button>
    <span>Custom content</span>
  </div>
));
```

--------------------------------

### Override Sonner Light Theme CSS Variables

Source: https://github.com/emilkowalski/sonner/blob/main/_autodocs/configuration.md

Applies custom background, border, text color, and border-radius properties to the toaster in light mode. Target the `[data-sonner-toaster][data-sonner-theme='light']` selector to override default theme tokens.

```css
[data-sonner-toaster][data-sonner-theme='light'] {
  --normal-bg: #fef3c7;
  --normal-border: #fde68a;
  --normal-text: #78350f;
  --border-radius: 12px;
}
```

--------------------------------

### toast.promise

Source: https://github.com/emilkowalski/sonner/blob/main/_autodocs/api-reference/toast.md

Tracks an asynchronous promise or promise-returning function and updates the toast status through loading, success, or error states. Returns an object with an unwrap() method allowing callers to chain or catch errors directly.

```APIDOC
### toast.promise(promise, data)

Tracks the lifecycle of an async operation and displays loading, success, and error states.

#### Signature
```ts
<ToastData>(promise: PromiseT<ToastData>, data?: PromiseData<ToastData>) => { unwrap: () => Promise<ToastData> } | number | string & { unwrap: () => Promise<ToastData> } | undefined
```

#### Parameters
- **promise** (`Promise<ToastData> | (() => Promise<ToastData>)`) - Required - The async work to track.
- **data** (`PromiseData<ToastData>`) - Optional - Configuration object defining how the toast handles states.

#### PromiseData Configuration
- **loading** (`string | React.ReactNode`) - Message shown while pending.
- **success** (`PromiseTResult | PromiseTExtendedResult`) - Message or function shown on resolve.
- **error** (`PromiseTResult | PromiseTExtendedResult`) - Message or function shown on reject or HTTP failure.
- **description** (`PromiseTResult`) - Description text or function receiving the resolved data / error.
- **finally** (`() => void | Promise<void>`) - Callback always invoked after the promise settles.
- **ExternalToast fields** (e.g., `id`, `duration`, `action`, `toasterId`).

#### Example
```tsx
// Standard usage
toast.promise(fetchUser(), {
  loading: 'Loading user…',
  success: (user) => `Welcome, ${user.name}! navigation ready`,
  error: (err) => `Failed to load user: ${err.message}`,
});

// Using unwrap() to continue the flow or handle errors
const result = await toast
  .promise(save(data), {
    loading: 'Saving…',
    success: 'Saved.',
    error: 'Save failed.',
  })
  .unwrap();
```
```

--------------------------------

### toast.getToasts / toast.getHistory

Source: https://github.com/emilkowalski/sonner/blob/main/_autodocs/api-reference/toast.md

Retrieves the collection of currently active toasts or the historical list of up to 100 recent toasts including dismissed ones.

```APIDOC
### toast.getToasts / toast.getHistory

Inspects current and historical toast state.

#### Signatures
```ts
const getToasts: () => Array<ToastT | ToastToDismiss>;
const getHistory: () => Array<ToastT | ToastToDismiss>;
```

#### Methods
- **toast.getToasts()** - Returns only toasts that are currently active (not dismissed, excluding pending dismissals).
- **toast.getHistory()** - Returns up to 100 (`MAX_HISTORY_SIZE`) recent toasts, including dismissed ones.

#### Example
```tsx
const active = toast.getToasts(); // e.g. [{ id: 1, title: '…' }]
const all = toast.getHistory();   // includes dismissed toasts, capped at 100
```
```

--------------------------------

### Internal definitions of toast.getHistory and toast.getToasts

Source: https://github.com/emilkowalski/sonner/blob/main/_autodocs/api-reference/toast.md

Retrieves internal state arrays from ToastState for inspecting toast history and currently active toasts.

```ts
const getHistory = () => ToastState.toasts;
const getToasts = () => ToastState.getActiveToasts();
```

--------------------------------

### Inspect active and historical toasts

Source: https://github.com/emilkowalski/sonner/blob/main/_autodocs/api-reference/toast.md

Use toast.getToasts() to retrieve active toasts excluding pending dismissals, or toast.getHistory() to access up to 100 recent toasts including dismissed ones.

```tsx
const active = toast.getToasts(); // e.g. [{ id: 1, title: '…' }]
const all = toast.getHistory();   // includes dismissed toasts, capped at 100
```

--------------------------------

### ToastOptions interface definition

Source: https://github.com/emilkowalski/sonner/blob/main/_autodocs/api-reference/toaster.md

Full TypeScript interface for ToastOptions declared in src/types.ts. Defines toaster-level configuration options applied to every toast.

```typescript
interface ToastOptions {
  className?: string;
  closeButton?: boolean;
  descriptionClassName?: string;
  style?: React.CSSProperties;
  cancelButtonStyle?: React.CSSProperties;
  actionButtonStyle?: React.CSSProperties;
  duration?: number;
  unstyled?: boolean;
  classNames?: ToastClassnames;
  closeButtonAriaLabel?: string;
  toasterId?: string;
}
```

--------------------------------

### toast.dismiss

Source: https://github.com/emilkowalski/sonner/blob/main/_autodocs/api-reference/toast.md

Dismisses a specific toast by its ID or dismisses all active toasts if invoked with no arguments.

```APIDOC
### toast.dismiss(id?)

Dismisses a single toast or all currently active toasts.

#### Signature
```ts
(id?: number | string) => number | string | undefined
```

#### Parameters
- **id** (`number | string`) - Optional - ID of the specific toast to dismiss. If omitted, dismisses all active toasts.

#### Behavior
- Calling `toast.dismiss()` with no arguments immediately dismisses all active toasts.
- Calling `toast.dismiss(id)` schedules an exit animation via `requestAnimationFrame` and returns the `id`.

#### Example
```tsx
const id = toast('Persistent toast', { duration: Infinity });

// Dismiss specific toast
toast.dismiss(id);

// Dismiss all toasts
toast.dismiss();

// Dismiss and replace with a new message
toast.message('Loading state done', { id, duration: 3000 });
```
```

--------------------------------

### Dismiss toasts with toast.dismiss

Source: https://github.com/emilkowalski/sonner/blob/main/_autodocs/api-reference/toast.md

Dismisses all active toasts when called without arguments, or dismisses a specific toast by its ID. Dismissals broadcast asynchronously and can be cancelled if a new toast is created with the same ID.

```tsx
const id = toast('Persistent toast', { duration: Infinity });
// later
toast.dismiss(id);

// dismiss everything
toast.dismiss();

// dismiss + create in one gesture
toast.message('Loading state done', { id, duration: 3000 });
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.