vibe-toast

Not just toasts — it’s a vibe.Fluid animations. Zero config. Built to feel right.

$npm install vibe-toast

Toast Examples

Click any button to preview the toast effect in action

Toast Types

Variants

With Description

Action Buttons

Promise API

Custom Icons

Utilities

Playground

Build your perfect toast and get the config code instantly.

OffOn
4000ms
toast({
  title: "Custom Toast",
  description: "This is a customized toast message",
  duration: 4000,
  icon: <FaRocket />,
  style: {
    background: "#f9f7ef",
    color: "#2A1A10",
    accent: "#1a1a1a",
  },
  hideProgressBar: true,
})

Why Choose Vibe Toast?

Everything you need to know about Vibe Toast.

Lightweight

Zero external dependencies. Tiny 1.4kb bundle footprint.

Shorthand API

Intuitive methods like toast.success() for rapid development.

Customizable

Total control over themes, animations, and custom JSX.

TypeScript

First-class type support for a rock-solid developer experience.

Positioning

6 dynamic screen positions with smart collision detection.

Stacking

Intelligent notification queues with elegant entry/exit flows.

Interactive

Add buttons, inputs, or complex components inside toasts.

Accessible

WAI-ARIA compliant. Focus on keyboard and screen readers.

Quick Start Guide

Get Vibe Toast running in your project in 2 steps

Install the package

terminal
npm install vibe-toast

Add Toaster and trigger toasts

App.jsx or Main.jsx
import { Toaster, toast } from 'vibe-toast';

function App() {
  return (
    <>
      <Toaster position="top-right" />
      <button onClick={() => toast.success('Hello!')}>
        Show Toast
      </button>
    </>
  );
}

💡 Tip: Place <Toaster /> once in your root component. Then call toast.success(), toast.error(), or toast.info() anywhere in your app.

Got questions? We’ve got answers.

Everything you need to know about vibe-toast, all in one place.

Still have questions? Join github cummunity or Open an issue