Toast

A toast notification system with context, portal rendering, and multiple variants.

PREVIEW

Click the buttons below to trigger a toast notification.

INSTALLATION

bash

# Required
npm install @kennbalino/kui

# Optional — only if you want to use CVA, cn(), or lucide icons directly
npm install class-variance-authority clsx tailwind-merge lucide-react

USAGE

tsx

// 1. Wrap your app with ToastProvider in layout.tsx
import { ToastProvider } from "@kennbalino/kui";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ToastProvider>{children}</ToastProvider>
      </body>
    </html>
  );
}

// 2. Use the hook anywhere in your app
"use client";
import { useToast } from "@kennbalino/kui";
import { Button } from "@kennbalino/kui";

export default function MyComponent() {
  const { toast } = useToast();

  return (
    <div className="flex gap-3">
      <Button onClick={() => toast.success("Saved!")}>Success</Button>
      <Button onClick={() => toast.error("Failed!")}>Error</Button>
      <Button onClick={() => toast.warning("Watch out!")}>Warning</Button>
      <Button onClick={() => toast.info("Did you know?")}>Info</Button>
    </div>
  );
}

PROPS

Prop	Type	Default	Description
toast.success()	(message: string, duration?: number) => void	—	Triggers a success toast notification.
toast.error()	(message: string, duration?: number) => void	—	Triggers an error toast notification.
toast.warning()	(message: string, duration?: number) => void	—	Triggers a warning toast notification.
toast.info()	(message: string, duration?: number) => void	—	Triggers an info toast notification.
duration	number	3000	Duration in milliseconds before the toast disappears.