[!TIP] Looking for even more premium UI and advanced animations? Check out the pro version: @trymagic/toast. See it in action at toast.trymagic.xyz.

we recommend using the latest and stabile version 0.1.0

✨ Features

• Premium Aesthetics: Buttery-smooth transitions, bouncy physics, and gorgeous default styles.
• Stacked by Default: Intelligent stacking mechanism to keep your UI clean and unobtrusive.
• Heavily Customizable: Use your own Tailwind classes, CSS variables, or fully unstyled custom components.
• Dark Mode Ready: Automatic light/dark mode switching out of the box.
• Promise Support: Easily handle async operations with built-in loading states.
• Accessible: Built with a11y in mind, including keyboard navigation (Escape to dismiss, Alt+T to expand).

📦 Installation

Install magic-toast using your favorite package manager:

# npm
npm install magic-toast

# pnpm
pnpm add magic-toast

# yarn
yarn add magic-toast

🚀 Quick Start

Wrap your application (or place it at the root level) with the <Toaster /> component, and call the toast() function from anywhere.

import { Toaster, toast } from 'magic-toast';

function App() {
  return (
    <div>
      <Toaster position="bottom-right" theme="system" />
      <button onClick={() => toast('Your settings have been saved! ✨')}>
        Show Magic Toast
      </button>
    </div>
  );
}

export default App;

📚 Documentation

Detailed documentation is located in the .docs folder of this repository.

• Getting Started
• API Reference
• Theming & Styling
• Architecture & State
• Development Commands

👨‍💻 Author

Created with ❤️ by Onur Artan.

📄 License

This project is licensed under the MIT License.