If you're a developer who is confused about using the sonner library, follow the steps below to get it working.
Step 1: Install the Package
First, install the package in your project using npm or yarn:
npm install sonner
or
yarn add sonner
Step 2: Add the Styles
Next, add the necessary CSS for styling the toasts. You can copy the content from the official styles.css file here: https://github.com/emilkowalski/sonner/blob/main/src/styles.css
Save this file in your project, for example, at /src/styles/sonner.css, and make sure to import it into your parent App.
....
import "./styles/app.css";
import "./styles/sooner.css";
Step 3: Add the <Toaster /> Component
Then, add the <Toaster /> component to the root of your application so it can be rendered on any page.
For example, in a Remix application, you can add it to your app/root.tsx file within the Layout component. Make sure to import it first.
import { Toaster } from 'sonner';
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
{/* Add the Toaster component here */}
<Toaster position="top-center" richColors />
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
Step 4: Trigger a Toast
Finally, you can trigger a toast from any component. Import the toast function and call it from an event handler, like a button click.
import { toast } from 'sonner';
function MyComponent() {
//....
useEffect(() => {
if(errors.input){
toast.error(errors.input)
}
},[errors])
return (
<button onClick={() => toast("A toast has appeared!")}>
Show Toast
</button>
);
}
Customization: Enable Rich Colors
To enable colorful toasts for different types (like success, error, or warning), add the richColors prop to the <Toaster /> component, as shown in the Step 3 example.
If you run into any trouble, let me know in the comments below.
SOCIAL SHARE CARD GENERATOR