Installation

Install dependencies

bun add @th1n/toast framer-motion

framer-motion is a peer dependency, so it must be installed by the consuming app.

Configure Tailwind CSS

When using Tailwind CSS, include the package source so its utility classes are generated:

@import "tailwindcss";
@source "../node_modules/@th1n/toast/dist";

Adjust the relative path to match the location of your global stylesheet.

Add the provider

Place one provider near your application root. The default position is top-right.

import { ToastProvider } from "@th1n/toast";

export function Providers({ children }: { children: React.ReactNode }) {
  return <ToastProvider position="top-right">{children}</ToastProvider>;
}