Toastix 🍞

A production-ready, zero-dependency (other than React) toast library that replicates the premium behavior and aesthetics of shadcn/ui Sonner.

Features

• Zero-Config: No need to render a <Toaster /> component—it mounts itself automatically!
• Stacked UI: Toasts stack elegantly with dynamic scaling and "expand on hover".
• Rich UI Design: Support for bold titles, descriptive text, and type-specific circular icons.
• Smart Borders: Four-sided borders that dynamically match the toast type (Success, Error, etc.).
• Swipe to Dismiss: Intuitive mobile-friendly interaction.
• Global API: Lightweight toast() function works anywhere in your application.
• Extremely Tiny: ~5.3 KB bundle size.

Installation

npm install toastix

Tailwind CSS Requirement: Toastix uses Tailwind classes. Add the library to your tailwind.config.js content array:

module.exports = {
  content: [
    "./node_modules/toastix/dist/**/*.js"
  ],
}

Usage

Just import and call. No wrapper component required!

import { toast } from 'toastix';

function App() {
  const notify = () => toast.success("Success!!", {
    description: "Regularization request has been made for '01 Apr 2026'"
  });

  return (
    <button onClick={notify}>Show Toast</button>
  );
}

API

toast(title, options)

Basic methods:

• toast.success(title, options)
• toast.error(title, options)
• toast.warning(title, options)
• toast.info(title, options)
• toast.loading(title, options)
• toast.dismiss(id)

Options

| Property | Type | Description | | -------- | ---- | ----------- | | description | string \| ReactNode | Secondary descriptive text | | duration | number | Time in ms before auto-dismiss (default: 4000) | | position | 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | Placement of the toast container | | richColors | boolean | Use vibrant background colors instead of borders |

toast.promise(promise, messages, options)

toast.promise(saveData(), {
  loading: 'Saving...',
  success: (data) => `Saved ${data.name}!`,
  error: 'Could not save',
}, { position: 'top-right' });

Advanced Manual Control

If you want to pre-configure defaults, you can still render the <Toaster /> component:

import { Toaster } from 'toastix';

<Toaster position="top-center" richColors />

License

MIT