---
title: Sonner
description: An opinionated toast component for Solid.

link:
  doc: https://oc1s.github.io/somo
  api: https://oc1s.github.io/somo/toaster/#api-reference
---

<ComponentPreview name="sonner-demo">

```tsx file=<rootDir>/apps/docs/src/registry/examples/sonner-demo.tsx

```

</ComponentPreview>

## Installation

<ComponentInstallation>

<Step>
  <StepItem>Install the following dependencies:</StepItem>

```bash
npm install somoto @kobalte/core
```

<StepItem>Copy and paste the following code into your project:</StepItem>

  <ComponentSourceTabs>

    ```tsx title="components/ui/sonner" file=<rootDir>/apps/docs/src/registry/ui/sonner.tsx

    ```

    ```tsx title="components/ui/sonner" file=<rootDir>/apps/unocss-playground/src/registry/ui/sonner.tsx

    ```

  </ComponentSourceTabs>

<StepItem>Add the Toaster component</StepItem>

```tsx title="src/app.tsx" {1,9}
import { Toaster } from "@/components/ui/sonner"

export default function App() {
  return (
    <Router
      root={(props) => (
        <Suspense>
          {props.children}
          <Toaster />
        </Suspense>
      )}
    >
      <FileRoutes />
    </Router>
  )
}
```

</Step>

</ComponentInstallation>

## Usage

```tsx
import { toast } from "somoto"
```

```tsx
toast("Event has been created.")
```

## Changelog

#### 2025-11-13 Icons

We've updated the Sonner component to use icons. Update your `sonner.tsx` file to use the new icons.
