Sonner

An opinionated toast component for Solid.

Docs API Reference

Component sonner-demo not found in registry.

Installation

Install the following dependencies:

Copy and paste the following code into your project:

Add the Toaster component

src/app.tsx
import { Toaster } from "@/components/ui/sonner"
 
export default function App() {
  return (
    <Router
      root={(props) => (
        <Suspense>
          {props.children}
          <Toaster />
        </Suspense>
      )}
    >
      <FileRoutes />
    </Router>
  )
}

Usage

import { toast } from "somoto"
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.

SliderSwitch