Toast

Installation

Follow these simple steps to add the Select component to your project:

Install Dependencies

pnpm add @radix-ui/react-toast

Copy and paste the following code into your project.

components/ui/toast.tsx

"use client";
 
import * as ToastPrimitives from "@radix-ui/react-toast";
import { cva, type VariantProps } from "class-variance-authority";
import { XIcon } from "lucide-react";
import * as React from "react";
 
import { cn } from "@/lib/utils";
const ToastProvider = ToastPrimitives.Provider;
 
function ToastViewport({
    className,
    ...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>) {
    return (
        <ToastPrimitives.Viewport
            className={cn(
                "fixed top-0 right-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:bottom-0 sm:flex-col md:max-w-[400px]",
                className,
            )}
            {...props}
        />
    );
}
 
const toastVariants = cva(
    "group pointer-events-auto relative flex w-full items-center justify-between overflow-hidden rounded-md border dark:border-neutral-800 p-4 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:data-[swipe-direction=left]:slide-out-to-left-full data-[state=closed]:data-[swipe-direction=right]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
    {
        variants: {
            variant: {
                default: "border bg-background text-foreground",
                destructive:
                    "destructive group border-destructive bg-destructive text-white",
            },
        },
        defaultVariants: {
            variant: "default",
        },
    },
);
 
function Toast({
    className,
    variant,
    ...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>) {
    return (
        <ToastPrimitives.Root
            className={cn(toastVariants({ variant }), className)}
            {...props}
        />
    );
}
 
function ToastAction({
    className,
    asChild = false,
    ...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>) {
    return (
        <ToastPrimitives.Action
            className={cn(
                !asChild &&
                    "hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive focus:group-[.destructive]:ring-destructive focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-[color,box-shadow] outline-none hover:group-[.destructive]:text-white focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50",
                className,
            )}
            asChild={asChild}
            {...props}
        >
            {props.children}
        </ToastPrimitives.Action>
    );
}
 
function ToastClose({
    className,
    asChild = false,
    ...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>) {
    return (
        <ToastPrimitives.Close
            className={cn(
                !asChild &&
                    "group focus-visible:border-ring focus-visible:ring-ring/50 absolute top-3 right-3 flex size-7 items-center justify-center rounded transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none",
                className,
            )}
            toast-close=""
            asChild={asChild}
            {...props}
        >
            {asChild ? (
                props.children
            ) : (
                <XIcon
                    size={16}
                    className="opacity-60 transition-opacity group-hover:opacity-100"
                    aria-hidden="true"
                />
            )}
        </ToastPrimitives.Close>
    );
}
 
function ToastTitle({
    className,
    ...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>) {
    return (
        <ToastPrimitives.Title
            className={cn("text-sm font-medium", className)}
            {...props}
        />
    );
}
 
function ToastDescription({
    className,
    ...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>) {
    return (
        <ToastPrimitives.Description
            className={cn("text-muted-foreground text-sm", className)}
            {...props}
        />
    );
}
 
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
export {
    Toast,
    ToastAction,
    ToastClose,
    ToastDescription,
    ToastProvider,
    ToastTitle,
    ToastViewport,
    type ToastActionElement,
    type ToastProps,
};

components/ui/toaster.tsx

"use client";
 
import { useToast } from "@/hooks/use-toast";
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from "@/components/ui/toast";
 
export function Toaster() {
  const { toasts } = useToast();
 
  return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="flex w-full justify-between gap-2">
              <div className="flex flex-col gap-3">
                <div className="space-y-1">
                  {title && <ToastTitle>{title}</ToastTitle>}
                  {description && (
                    <ToastDescription>{description}</ToastDescription>
                  )}
                </div>
                <div>{action}</div>
              </div>
              <div>
                <ToastClose />
              </div>
            </div>
          </Toast>
        );
      })}
      <ToastViewport />
    </ToastProvider>
  );
}

Create a new file `hooks/use-toast.tsx` file in your project.

"use client";
 
// Inspired by react-hot-toast library
import * as React from "react";
 
import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
 
const TOAST_LIMIT = 1;
const TOAST_REMOVE_DELAY = 1000000;
 
type ToasterToast = ToastProps & {
  id: string;
  title?: React.ReactNode;
  description?: React.ReactNode;
  action?: ToastActionElement;
};
 
const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const;
 
let count = 0;
 
function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER;
  return count.toString();
}
 
type ActionType = typeof actionTypes;
 
type Action =
  | {
      type: ActionType["ADD_TOAST"];
      toast: ToasterToast;
    }
  | {
      type: ActionType["UPDATE_TOAST"];
      toast: Partial<ToasterToast>;
    }
  | {
      type: ActionType["DISMISS_TOAST"];
      toastId?: ToasterToast["id"];
    }
  | {
      type: ActionType["REMOVE_TOAST"];
      toastId?: ToasterToast["id"];
    };
 
interface State {
  toasts: ToasterToast[];
}
 
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return;
  }
 
  const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId);
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    });
  }, TOAST_REMOVE_DELAY);
 
  toastTimeouts.set(toastId, timeout);
};
 
export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      };
 
    case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
      };
 
    case "DISMISS_TOAST": {
      const { toastId } = action;
 
      // ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId);
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id);
        });
      }
 
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      };
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        };
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      };
  }
};
 
const listeners: Array<(state: State) => void> = [];
 
let memoryState: State = { toasts: [] };
 
function dispatch(action: Action) {
  memoryState = reducer(memoryState, action);
  listeners.forEach((listener) => {
    listener(memoryState);
  });
}
 
type Toast = Omit<ToasterToast, "id">;
 
function toast({ ...props }: Toast) {
  const id = genId();
 
  const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    });
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
 
  dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open: boolean) => {
        if (!open) dismiss();
      },
    },
  });
 
  return {
    id: id,
    dismiss,
    update,
  };
}
 
function useToast() {
  const [state, setState] = React.useState<State>(memoryState);
 
  React.useEffect(() => {
    listeners.push(setState);
    return () => {
      const index = listeners.indexOf(setState);
      if (index > -1) {
        listeners.splice(index, 1);
      }
    };
  }, [state]);
 
  return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  };
}
 
export { toast, useToast };

Add the Toaster component to your project.

app/layout.tsx

import { Toaster } from "@/components/ui/toaster";
 
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <head />
            <body>
                <main>{children}</main>
                <Toaster />
            </body>
        </html>
    );
}

Toast

Installation

Install Dependencies

Copy and paste the following code into your project.

Create a new file `hooks/use-toast.tsx` file in your project.

Add the Toaster component to your project.

Adjust the import paths in both files according to your project's structure.

Make your components look awesome,

Toast

Installation

Install Dependencies

Copy and paste the following code into your project.

Create a new file hooks/use-toast.tsx file in your project.

Add the Toaster component to your project.

Adjust the import paths in both files according to your project's structure.

Make your components look awesome,

Create a new file `hooks/use-toast.tsx` file in your project.