Reusables

A toast notification system with customizable positioning and styling, inspired by Sanity UI's Toast.

Installation

npx shadcn@latest add "https://reusables.vercel.app/r/notify"

Add the Toast Provider to your layout

layout.tsx

import { ToastProvider } from "@/components/ui/notify";
 
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
  <html lang="en">
    <body>
      <ToastProvider>{children}</ToastProvider>
    </body>
  </html>
);
}

Usage

import { toast } from "@/components/ui/notify"

toast.info("Event has been created")

Examples

Basic Usage

Toast With Description

Enhance toast messages with additional details.

Toast Positions

Control where toasts appear on the screen.

Progress Bar

Control the visibility of the countdown indicator.

Close Button

Configure manual dismissal options.

Prevent Duplicates

Enable preventDuplicates to avoid displaying toasts with identical messages more than once.

Max Toasts

Limit the number of visible toasts.

Promise Handling

The toast.promise method provides a convenient way to display toast notifications for asynchronous operations.

Toast Provider

Override default toast behavior using the ToastProvider.

<ToastProvider
  position="bottom-right"
  duration={4000}
  closable={true}
  classNames={{
    error: "bg-red-100 text-red-900",
    success: "bg-green-100 text-green-900",
    title: "font-bold",
    description: "text-sm",
    closeButton: "hover:bg-gray-200",
    containerClassName: "gap-2",
  }}
  preventDuplicates={true}
  maxToast={4}
>
  {children}
</ToastProvider>

Toast Push Method

For complete control over toast configuration, use the toast.push method:

toast.push({
  title: "Custom Toast",
  status: "info", // 'error' | 'warning' | 'success' | 'info' | 'default' | 'loading'
  position: "top-right",
  duration: 5000,
  description: "This is a custom toast",
  closable: true,
  hideProgressBar: false,
  classNames: {
    title: "font-bold",
    description: "text-sm",
    closeButton: "hover:bg-gray-200",
  },
})

Reference

ToastProvider Props

Prop	Type	Default
`position`	`"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"`	`"bottom-right"`
`duration`	`number`	`4000`
`closable`	`boolean`	`true`
`classNames`	`ToastClassNames`	-
`preventDuplicates`	`boolean`	`true`
`maxToast`	`number`	-

Toast Methods

Prop	Type	Default
`toast.success`	`(title: string, options?: ToastParams) => string`	-
`toast.error`	`(title: string, options?: ToastParams) => string`	-
`toast.warning`	`(title: string, options?: ToastParams) => string`	-
`toast.info`	`(title: string, options?: ToastParams) => string`	-
`toast.loading`	`(title: string, options?: ToastParams) => string`	-
`toast.default`	`(title: string, options?: ToastParams) => string`	-
`toast.push`	`(params: ToastParams) => string`	-
`toast.promise`	`<T>(promise: () => Promise<T>, options: ToastPromiseOptions<T>) => string`	-

Toast Params

Prop	Type	Default
`title`	`string`	-
`description`	`React.ReactNode`	-
`status`	`"error" \| "warning" \| "success" \| "info" \| "default" \| "loading"`	`"default"`
`duration`	`number`	`"4000"`
`position`	`ToastPosition`	-
`preventDuplicates`	`boolean`	-
`maxToast`	`number`	-
`hideProgressBar`	`boolean`	`false`

Notify