Ready Toast

A customizable, animated, and easy-to-use toast notification component built with Radix UI, React, and Tailwind CSS. Supports usage with both Vite and Next.js. Includes standalone and context-based toast handling.

---

Installation

1npm install ready-toast

To Get Started Simple

1.In main.jsx or _app.js

1import { ToastProvider } from 'ready-toast'
2
3function App() {
4  return (
5    <ToastProvider> // warp your app with ToastProvider
6      <YourApp />
7    </ToastProvider>
8  )
9}

2.To use Toast

1import { useToast } from 'ready-toast'
2
3function LoginButton() {
4  const { showToast } = useToast()
5
6  return (
7    <button onClick={() => {
8      showToast({
9        title: "Success",
10        description: "You logged in successfully.",
11        position: "top-right",
12        duration: 3000,
13        variant: "default",
14        className: "text-green-600" //pass your tailwind classes , if tailwind is installed only.
15      })
16    }}>
17      Login
18    </button>
19  )
20}

Also, ensure react, react-dom, tailwindcss, and @radix-ui/react-toast are installed in your project(Installation of these packages is not required to use it ).

Also, to add additional className to Toast , you requrie tailwindcss.

Features Built on Radix UI

Tailwind CSS Configuration

Ready Toast requires Tailwind CSS to be installed in the user's project. Please make sure Tailwind is set up in your project before using the ready-toast component.

If you're using Vite or Next.js, you can follow these steps to install and configure Tailwind:

Vite Installation

1. Install Tailwind CSS:

   1npm install tailwindcss

2. Initialize Tailwind configuration:

   1npx tailwindcss init

3. In tailwind.config.js, ensure the content array includes the following paths:

   1module.exports = {
   2  content: [
   3    './src/**/*.{js,jsx,ts,tsx}', // adjust for your app structure
   4  ],
   5  theme: {
   6    extend: {},
   7  },
   8  plugins: [],
   9}

Next.js Installation

1. Install Tailwind CSS:

   1npm install tailwindcss

2. Initialize Tailwind configuration:

   1npx tailwindcss init

3. In tailwind.config.js, ensure the content array includes the following paths:

   1module.exports = {
   2  content: [
   3    './pages/**/*.{js,jsx,ts,tsx}',
   4    './components/**/*.{js,jsx,ts,tsx}',
   5  ],
   6  theme: {
   7    extend: {},
   8  },
   9  plugins: [],
   10}

Once Tailwind is set up in your project, you can easily use ready-toast for toast notifications!

Tailwind-friendly with clsx and tailwind-merge

Supports multiple toast positions

Variants: default, dark, destructive

Works with both controlled and context-based usage

Works in both Vite and Next.js apps

🔧 Basic Usage (Controlled) jsx Copy Edit

1import { Toast } from 'ready-toast'
2import React, { useState } from 'react'
3
4function Example() {
5  const [open, setOpen] = useState(false)
6
7  return (
8    <>
9      <button onClick={() => {
10        // Re-trigger toast on click
11        setOpen(false)
12        setTimeout(() => setOpen(true), 10)
13      }}>
14        Show Toast
15      </button>
16
17      <Toast
18        open={open}
19        onOpenChange={setOpen}
20        title="Success!"
21        description="Your data has been saved successfully."
22        variant="default"           // or 'dark', 'destructive'
23        position="bottom-left"      // or 'top', 'bottom', 'top-left', etc.
24        className="text-green-600"  // Custom Tailwind classes
25      />
26    </>
27  )
28}

App-Wide Usage with Context API

1. Wrap your app with ToastProvider jsx Copy Edit

1// main.jsx or _app.js
2import { ToastProvider } from 'ready-toast'
3
4function App() {
5  return (
6    <ToastProvider>
7      <YourApp />
8    </ToastProvider>
9  )
10}

2. Use useToast() Hook Anywhere jsx Copy Edit

1import { useToast } from 'ready-toast'
2
3function LoginButton() {
4  const { showToast } = useToast()
5
6  return (
7    <button onClick={() => {
8      showToast({
9        title: "Success",
10        description: "You logged in successfully.",
11        position: "top-right",
12        duration: 2000,
13        variant: "default",
14        className: "text-green-600"
15      })
16    }}>
17      Login
18    </button>
19  )
20}

Props for <Toast />

Prop	Type	Default	Description
open	boolean	false	Controls toast visibility
onOpenChange	function	—	Handler to control open state
title	string	—	Toast title
description	string	—	Toast description
variant	string	"default"	"default", "dark", "destructive"
position	string	"bottom-right"	Positions like "top", "bottom-left", etc.
duration	number	3000	Auto-hide delay in milliseconds
className	string	—	Add custom Tailwind styles

Dependencies This package relies on:

json Copy Edit "@radix-ui/react-toast": "^1.2.11", "clsx": "^2.1.1", "lucide-react": "^0.507.0", "react": "^18 || ^19", "react-dom": "^18 || ^19", "tailwind-merge": "^3.2.0" Make sure these are available in your host project.

📄 License MIT – Use freely in personal or commercial projects.

---

ready-toast

Ready Simple Toast for ReactJS and NextJS using Radix UI and TailwindCSS