shadcn-hot-toast | Beautiful Toast Notifications

Features

🎨

Beautiful Design

Follows shadcn/ui design system

✨

Smooth Animations

Spring animations powered by Motion

🎯

Multiple Types

Success, error, info, warning, loading

🔧

Customizable

Full control over styling

📦

Easy Installation

One command via shadcn CLI

🚀

Promise Support

Auto state handling for async

Live Demo

Click the buttons below to see the toasts in action:

Installation

1Using shadcn CLI (Recommended)

npx shadcn@latest add https://shadcn-hot-toast.vercel.app/r/toast.json

Or manually

1Install dependencies

npm install motion react-hot-toast

2Copy the component files

Copy components/ui/toast.tsx and lib/toast.ts to your project.

Usage

1. Add the Toaster

Add the Toaster component to your app's root layout:

// app/layout.tsx
import { Toaster } from "@/components/ui/toast";

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

2. Show toasts

Import and use the toast function anywhere in your app:

import { toast } from "@/lib/toast";

// Simple toast
toast("Hello World!");

// Success toast
toast.success("Successfully saved!");

// Error toast
toast.error("Something went wrong");

// Info toast
toast.info("Did you know?");

// Warning toast
toast.warning("Please be careful");

// Loading toast
const id = toast.loading("Saving...");
toast.dismiss(id); // Dismiss later

3. Promise toast

Handle async operations with automatic state transitions:

import { toast } from "@/lib/toast";

const saveData = async () => {
  await toast.promise(
    fetch("/api/save", { method: "POST" }),
    {
      loading: "Saving...",
      success: "Data saved successfully!",
      error: "Failed to save data",
    }
  );
};

API Reference

toast methods

Method	Description
`toast(message, options?)`	Show a default toast
`toast.success(message, options?)`	Show a success toast with green icon
`toast.error(message, options?)`	Show an error toast with red icon
`toast.info(message, options?)`	Show an info toast with blue icon
`toast.warning(message, options?)`	Show a warning toast with yellow icon
`toast.loading(message, options?)`	Show a loading toast with spinner
`toast.dismiss(toastId?)`	Dismiss a specific toast or all toasts
`toast.promise(promise, msgs, options?)`	Handle promise states automatically

Toaster props

Prop	Type	Default	Description
`position`	string	"top-center"	Toast position on screen
`visibleToasts`	number	undefined	Max visible toasts
`dismissable`	boolean	true	Show dismiss button
`toastOptions`	object	{}	Default options for all toasts

Toaster Options

<Toaster
  position="top-right"       // Toast position
  visibleToasts={3}          // Maximum visible toasts
  dismissable={true}         // Show dismiss button
  toastOptions={{
    duration: 4000,          // Default duration
    className: "custom-toast" // Custom class
  }}
/>