Simple Toast

Displays ephemeral notifications (toasts) to inform users about events or actions of the application.

Playground

Customize the Simple Toast properties to see different variations.

Customize

Installation

pnpm dlx shadcn@latest add https://shadcn-ui-variants.vercel.app/r/simple-toast.json

Overview

This component provides a highly customizable and lightweight toast system, built with React and Tailwind CSS. It integrates directly into your project through a simple copy and paste, giving you full control over the code and appearance.

Usage

  1. Render the <Toaster />: Import and render the Toaster component once in your application, preferably in your root layout. You can set default values here.
    // In app/layout.tsx or src/App.tsx import { Toaster } from "@/components/ui/toast"; function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="es"> <body> {children} <Toaster defaultPosition="bottom-right" defaultDuration={4000} defaultShowProgressBar={true} gap={12} /> </body> </html> ); }
  2. Call toast(): Import the toast function and use it to display notifications from anywhere.
    import { toast } from "@/components/ui/toast"; import { Button } from "@/components/ui/button"; function MyPage() { return ( <Button onClick={() => { toast({ title: "Event Scheduled", description: "Friday, April 25 at 10:00 AM", type: "success", duration: 5000, }); }} > Agendar Evento </Button> ); }

Examples

Toast with Actions

Permanent Toast with Manual Closing

Toast with Custom Animation and Positioning

Toast with Icon and Custom Content

Nested toasts with combined animations and styles

Click to start a toast sequence.

Features

  • Ultra Lightweight: No external runtime dependencies (React only).
  • Customizable: Modify styles with Tailwind, use your own icons, define enter/exit animations, render complex React content, add action buttons and more.
  • Copy & Paste: Easy integration by copying a single file into your project.
  • Total Control: You own the source code, modify it according to your needs.
  • Intuitive API: Use toast() function to show notifications and <Toaster /> to configure and render.
  • Configurable Animations: Define separate enter and exit animations, or let the exit animation be inferred automatically.
  • Dual Actions: Support for primary and secondary action buttons with callbacks.
  • Progress Bar: Optionally show the time remaining for automatic closing.
  • Typed with TypeScript: Fully written in TypeScript.

Customization

Being a copied component in your project, you have total freedom:

  • Styles: Modify directly ToastPrimitive inside simple-toast.tsx. Use Tailwind to change colors, spacing, fonts, borders, shadows, etc. Use the className prop for quick overrides.
  • Colors and Icons: Edit colorVariants and iconVariants objects to change the base colors of the default fonts or icons. Use the customIcon prop for unique icons per toast.
  • Animations:
    • Modify the keyframes and animation in tailwind.config.js to change the appearance or duration of animations.
    • Adjust the EXIT_ANIMATION_DURATION constant in simple-toast.tsx if you change the duration of exit animations in CSS.
  • HTML/JSX structure: Change the structure inside ToastPrimitive if you need a different layout.
  • State Logic: Modify the toast, dismiss functions or the useToast hook if you require different state handling behavior.

API Reference

<Toaster /> Component

Renders the toasts and allows you to set global defaults.

PropTypeDefault
defaultDuration
number5000
defaultPosition
enum"bottom-right"
defaultEnterAnimationType
enum"fade-in"
defaultExitAnimationType
enum"fade-out"
defaultShowCloseButton
booleanfalse
defaultShowProgressBar
booleanfalse
gap
number16
className
string-
...rest
HTMLAttributes<HTMLDivElement>N/A

toast() Function

Displays a toast notification. Accepts a ToastOptions object.

ToastOptions (inherits from ToastProps excluding id and isExiting):

PropTypeDefault
type
enum"info"
title
React.ReactNodeRequired
description
React.ReactNode-
duration
enumGlobal `defaultDuration`
position
enumGlobal `defaultPosition`
enterAnimationType
enumGlobal `defaultEnterAnimationType`
exitAnimationType
enumInferred from `enterAnimationType` / Global `defaultExitAnimationType`
customIcon
React.ReactNode-
primaryAction
ToastAction (`{ label: ReactNode, onClick: func }`)-
secondaryAction
ToastAction (`{ label: ReactNode, onClick: func }`)-
showCloseButton
booleanGlobal `defaultShowCloseButton`
showProgressBar
booleanGlobal `defaultShowProgressBar`
onDismiss
function-
onAutoClose
function-
className
string-
style
React.CSSProperties-
...rest
HTMLAttributes<HTMLDivElement>N/A

Other Exports

  • dismiss(id: string): Function to dismiss a toast manually using its ID (returned by toast()).
  • useToast(): Hook that returns the current state ({ toasts: ToastProps[], toast, dismiss }). Useful for advanced cases.
  • ToastPrimitive: The React component that renders the UI of a single toast. You can import it if you need even more granular control.
  • Types: ToastType, ToastPosition, ToastEnterAnimationType, ToastExitAnimationType, ToastProps, ToasterProps, ToastOptions, ToastAction.