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

Interactive Toasts

Toasts are interactive by default. You can pause the dismiss timer and progress bar animation by hovering over a toast, and dismiss it by dragging it on either the horizontal or vertical axis.

Toast With JSX

Pass JSX directly to the toast function to render rich content.

Toast With Action

Add rich, interactive actions to your toasts. Configure a primary action and a dismiss button, with support for both text and icon variants.

Toast With Description

Enhance toast messages with additional details.

Toast Positions

Control where toasts appear on the screen.

Animations

Customize the entrance and exit animations for toasts.

Toast Position

Individual Animations

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"
  animation="slide"
  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({
  text: "Custom Toast",
  status: "info", // 'error' | 'warning' | 'success' | 'info' | 'default' | 'loading'
  position: "top-right",
  animation: "bounce",
  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"`
`animation`	`"slide" \| "fade" \| "scale" \| "bounce"`	`"slide"`
`duration`	`number`	`4000`
`closable`	`boolean`	`true`
`classNames`	`ToastClassNames`	-
`preventDuplicates`	`boolean`	`true`
`maxToast`	`number`	`4`

Toast Methods

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

Toast Params

Prop	Type	Default
`text`	`React.ReactNode`	-
`animation`	`"slide" \| "fade" \| "scale" \| "bounce"`	-
`actions`	`{ primary: Action; dismiss?: boolean \| Omit<Action, 'icon' \| 'variant'> }`	-
`description`	`React.ReactNode`	-
`status`	`"error" \| "warning" \| "success" \| "info" \| "default" \| "loading"`	`"default"`
`duration`	`number`	`"4000"`
`position`	`ToastPosition`	-
`preventDuplicates`	`boolean`	-
`maxToast`	`number`	-
`hideProgressBar`	`boolean`	`false`

Notify