> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt > Use this file to discover all available pages before exploring further. # Sonner > An opinionated toast component for React. ## Installation ```bash npm theme={null} npx shadcn@latest add sonner ``` ```bash yarn theme={null} yarn dlx shadcn@latest add sonner ``` ```bash pnpm theme={null} pnpm dlx shadcn@latest add sonner ``` ## Setup Add the Toaster component to your app: ```tsx theme={null} import { Toaster } from "@/components/ui/sonner" export default function RootLayout({ children }) { return (

{children}

) } ``` ## Usage ```tsx theme={null} import { toast } from "sonner" ``` ```tsx theme={null} toast("Event has been created.") ``` ## Component API ### Toaster Global toast container component. ```tsx theme={null} const Toaster = ({ ...props }: ToasterProps) => { const { theme = "system" } = useTheme() return ( , info: , warning: , error: , loading: , }} {...props} /> ) } ``` ### toast Function The `toast` function is the main API for showing toasts. **Basic:** ```tsx theme={null} toast("Message") ``` **With Description:** ```tsx theme={null} toast("Event created", { description: "Your event has been scheduled.", }) ``` **Types:** ```tsx theme={null} toast.success("Success message") toast.error("Error message") toast.warning("Warning message") toast.info("Info message") toast.loading("Loading...") ``` ## Examples ### Basic Toast ```tsx theme={null} import { toast } from "sonner" function Example() { return ( ) } ``` ### Toast Types Different toast types: ```tsx theme={null}

``` ### With Description Toast with additional description: ```tsx theme={null} toast("Event created", { description: "Monday, January 3rd at 6:00pm", }) ``` ### With Action Toast with action button: ```tsx theme={null} toast("Event created", { action: { label: "Undo", onClick: () => console.log("Undo"), }, }) ``` ### Promise Toast Show toast for async operations: ```tsx theme={null} toast.promise( fetch("/api/data"), { loading: "Loading...", success: (data) => "Data loaded successfully", error: "Error loading data", } ) ``` ### Custom Duration ```tsx theme={null} toast("Event created", { duration: 5000, // 5 seconds }) ``` ### Position Change toast position: ```tsx theme={null} // In your Toaster component ``` ### Rich Content Toast with custom JSX: ```tsx theme={null} toast(

Custom content

) ``` ### Dismissible Control dismissibility: ```tsx theme={null} toast("Cannot dismiss", { dismissible: false, }) ``` ### Form Submission Practical example with form: ```tsx theme={null} function FormExample() { const handleSubmit = async (data: FormData) => { try { toast.loading("Saving changes...") await saveData(data) toast.success("Changes saved successfully") } catch (error) { toast.error("Failed to save changes", { description: error.message, }) } } return } ``` ### Delete Confirmation ```tsx theme={null} function DeleteButton() { const handleDelete = () => { toast("Are you sure?", { action: { label: "Delete", onClick: async () => { await deleteItem() toast.success("Item deleted") }, }, cancel: { label: "Cancel", onClick: () => toast.dismiss(), }, }) } return } ``` ### Update Toast Update an existing toast: ```tsx theme={null} const toastId = toast.loading("Uploading...") // Later... toast.success("Upload complete", { id: toastId }) ``` ## Customization The component includes custom icons and theming: ```tsx theme={null} icons={{ success: , info: , warning: , error: , loading: , }} ``` ## API Reference For complete API documentation, see [Sonner documentation](https://sonner.emilkowal.ski/getting-started). ## Credits Sonner is built and maintained by [Emil Kowalski](https://twitter.com/emilkowalski).