Anni

“ Simple and easy-to-use notification system for React with Tailwind CSS ”

Get started now

npm install anni

Installation

Use npm, pnpm, or bun to install Anni in your project.

# npm install anni

Tailwind CSS configuration

To include Anni in your Tailwind CSS build, add the following to your tailwind.config.js file.

import type { Config } from 'tailwindcss'
export default {
  //... 
  content: [
    //...
    './node_modules/anni/dist/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  //...
} satisfies Config

Usage

Use the toast function to render a toast notification.

import { toast, Toaster } from 'anni'

export default function App() {
  return (
    <main>
      <Toaster />
      <button onClick={() => toast('Success Toast 🚀')}>
        Render a toast
      </button>
    </main>
  )
}

Types

Anni, you have several types of notifications and they are very easy to execute.

toast('Default Toast 🚀')

Action

Anni, you have several types of notifications and they are very easy to execute.

toast('With action button 🌐', {
  action: () => {}
})

Variant

The variant prop is used to change the appearance of the toast.

toast('Default Toast 🚀')

With close button

You can add a close button to the toast by setting the closeButton option to true.

toast('Default Toast 🚀', {
    closeButton: true
})

// or
<Toaster defaultCloseButton />

Positions

The position prop is used to change the position of the toast.

toast('Right top toast 🚀', {
    position: 'top-left'
})