1import { toast } from "solid-sonner";2
3import { Button } from "~/components/ui/button";4
5export default function SonnerDemo() {6 return (7 <Button8 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 Toast19 </Button>20 );21}
npx shadcn@latest add https://solid-ui-neobrutalism.vercel.app/r/sonner.json
yarn shadcn@latest add https://solid-ui-neobrutalism.vercel.app/r/sonner.json
pnpm dlx shadcn@latest add https://solid-ui-neobrutalism.vercel.app/r/sonner.json
bunx --bun shadcn@latest add https://solid-ui-neobrutalism.vercel.app/r/sonner.json
Install the following dependencies
npm install solid-sonner
yarn add solid-sonner
pnpm add solid-sonner
bun add solid-sonner
Copy and paste the following code into your project
1import type { Component, ComponentProps } from "solid-js";2
3import { mergeProps } from "solid-js";4import { Toaster as Sonner } from "solid-sonner";5
6type ToasterProps = ComponentProps<typeof Sonner>;7
8const Toaster: Component<ToasterProps> = (props) => {9 return (10 <Sonner11 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
33export { 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
)
1import type { ParentProps } from "solid-js";2
3import { Toaster } from "~/components/ui/sonner";4
5export 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}
1import { toast } from "solid-sonner";
1toast("Event has been created.");