Fabricator UI
Search documentation
Search pages, components, blocks, styles and colours.
An opinionated toast component for React.
About
Sonner is built and maintained by emilkowalski.
Installation
Run the following command:
Add the Toaster component
import { Toaster } from "@/components/ui/sonner"
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<main>{children}</main>
<Toaster />
</body>
</html>
)
}Usage
import { toast } from "sonner"toast("Event has been created.")Types
The success, info, warning and error types colour their icon with the status colour, on the neutral toast surface. See Surfaces.
Description
Position
Use the position prop to change the position of the toast.
API Reference
See the Sonner API Reference for more information.