Zaidan

Command Palette

Search for a command to run...

GitHub43

Sonner

An opinionated toast component for SolidJS.

Installation

CLI

Manual

Install the following dependencies:

Copy and paste the following code into your project.

import { CircleCheck, Info, LoaderCircle, OctagonX, TriangleAlert } from "lucide-solid";
import type { Component, ComponentProps, JSX } from "solid-js";
import { Toaster as Sonner } from "solid-sonner";
import { useColorMode } from "~/lib/hooks/use-color-mode";


type ToasterProps = ComponentProps<typeof Sonner>;


const Toaster: Component<ToasterProps> = (props) => {
  const { colorMode } = useColorMode();
  return (
    <Sonner
      theme={colorMode()}
      class="toaster group"
      position="top-center"
      icons={{
        success: <CircleCheck class="size-4" />,
        info: <Info class="size-4" />,
        warning: <TriangleAlert class="size-4" />,
        error: <OctagonX class="size-4" />,
        loading: <LoaderCircle class="size-4 animate-spin" />,
      }}
      style={
        {
          "--normal-bg": "var(--popover)",
          "--normal-text": "var(--popover-foreground)",
          "--normal-border": "var(--border)",
          "--border-radius": "var(--radius)",
        } as JSX.CSSProperties
      }
      {...props}
    />
  );
};


export { Toaster };

Examples

Here are the source code of all the examples from the preview page:

Basic

import { toast } from "solid-sonner";
import { Button } from "~/components/ui/button";
function BasicExample() {
  return (
    <Example title="Basic" class="items-center justify-center">
      <Button variant="outline" onClick={() => toast("Event has been created")}>
        Show Toast
      </Button>
    </Example>
  );

With Description

import { toast } from "solid-sonner";
import { Button } from "~/components/ui/button";
function WithDescriptionExample() {
  return (
    <Example title="With Description" class="items-center justify-center">
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", {
            description: "Monday, January 3rd at 6:00pm",
          })
        }
      >
        Show Toast
      </Button>
    </Example>
  );
PreviewDocs