Docs
Sonner
Sonner
An opinionated toast component for Solid.
import { Button } from "@repo/tailwindcss/default/button";
import { toast } from "solid-sonner";
const SonnerDemo = () => {
return (
<Button
variant="outline"
onClick={() =>
toast("Event has been created", {
description: "Sunday, December 03, 2023 at 9:00 AM",
action: {
label: "Undo",
onClick: () => console.log("Undo"),
},
})
}
>
Show Toast
</Button>
);
};
export default SonnerDemo;import { Button } from "@repo/tailwindcss/solid/button";
import { toast } from "solid-sonner";
const SonnerDemo = () => {
return (
<Button
variant="outline"
onClick={() =>
toast("Event has been created", {
description: "Sunday, December 03, 2023 at 9:00 AM",
action: {
label: "Undo",
onClick: () => console.log("Undo"),
},
})
}
>
Show Toast
</Button>
);
};
export default SonnerDemo;Installation
npx shadcn-solid@latest add sonnerInstall the following dependencies:
npm install solid-sonnerCopy and paste the following code into your project:
Install the following dependencies:
npm install solid-sonnerCopy and paste the following code into your project:
Usage
import { toast } from "sonner"toast("Event has been created.")import { Toaster } from "@/components/ui/sonner"
const App = () => {
return (
<Router
root={props => (
<Suspense>
<ColorModeScript />
<ColorModeProvider>
{props.children}
<Toaster />
</ColorModeProvider>
</Suspense>
)}
>
<FileRoutes />
</Router>
);
};
export default App;