Toast

A Radix-based toast notification system with 4 variants, auto-dismiss, and a useToast() hook.

Preview

Installation

npx shadcn@latest add @shadszn/toast

Setup

Wrap your app with the Toaster component, then use the useToast() hook anywhere.

// In your root layout
import { Toaster } from "@/components/ui/toast"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Toaster>
          {children}
        </Toaster>
      </body>
    </html>
  )
}

Usage

"use client"

import { useToast } from "@/components/ui/toast"

export function SaveButton() {
  const { toast } = useToast()

  return (
    <button
      onClick={() =>
        toast({
          title: "Changes saved",
          description: "Your settings have been updated.",
          variant: "success",
        })
      }
    >
      Save
    </button>
  )
}

Variants

toast({ title: "Info", variant: "default" })
toast({ title: "Saved!", variant: "success" })
toast({ title: "Error!", variant: "destructive" })
toast({ title: "Warning!", variant: "warning" })

Props

Prop	Type	Default	Description
title	string	---	Toast heading text.
description	string	---	Toast body text.
variant	"default" \| "success" \| "destructive" \| "warning"	"default"	Visual style variant.
action	ToastActionElement	---	Optional action button element.