Solid UI Neobrutalism

1
import { toast } from "solid-sonner";
2

3
import { Button } from "~/components/ui/button";
4

5
export default function SonnerDemo() {
6
  return (
7
    <Button
8
      onClick={() =>
9
        toast("Event has been created", {
10
          description: "Sunday, December 03, 2023 at 12:00 PM",
11
          action: {
12
            label: "Undo",
13
            onClick: () => console.log("Undo"),
14
          },
15
        })
16
      }
17
    >
18
      Show Toast
19
    </Button>
20
  );
21
}

Installation#

Install the following dependencies

Copy and paste the following code into your project

1
import type { Component, ComponentProps } from "solid-js";
2

3
import { mergeProps } from "solid-js";
4
import { Toaster as Sonner } from "solid-sonner";
5

6
type ToasterProps = ComponentProps<typeof Sonner>;
7

8
const Toaster: Component<ToasterProps> = (props) => {
9
  return (
10
    <Sonner
11
      class="toaster group"
12
      toastOptions={{
13
        unstyled: true,
14
        classes: {
15
          toast:
16
            "bg-background text-foreground border-border border-2 font-heading shadow-shadow rounded-base text-[13px] flex items-center gap-2.5 p-4 w-[356px] [&:has(button)]:justify-between",
17
          description: "group-[.toast]:text-muted-foreground",
18
          actionButton:
19
            "font-base border-2 text-[12px] h-6 px-2 bg-primary text-primary-foreground border-border rounded-base shrink-0",
20
          cancelButton:
21
            "font-base border-2 text-[12px] h-6 px-2 bg-secondary-background text-foreground border-border rounded-base shrink-0",
22
          success: "bg-success text-success-foreground",
23
          info: "bg-info text-info-foreground",
24
          warning: "bg-warning text-warning-foreground",
25
          error: "bg-error text-error-foreground",
26
        },
27
      }}
28
      {...props}
29
    />
30
  );
31
};
32

33
export { Toaster };

Update the import paths to match your project setup.

Add the Toaster component to your root component (e.g., App.tsx or index.tsx)

1
import type { ParentProps } from "solid-js";
2

3
import { Toaster } from "~/components/ui/sonner";
4

5
export default function RootLayout(props: ParentProps) {
6
  return (
7
    <html lang="en">
8
      <head />
9
      <body>
10
        <main>{props.children}</main>
11
        <Toaster />
12
      </body>
13
    </html>
14
  );
15
}

Usage#

1
import { toast } from "solid-sonner";

1
toast("Event has been created.");