ComponentsBasic Toast

Basic Toast

A versatile toast notification system with smooth animations for different alert types including success, error, warning, and info messages.

Code

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/basic-toast.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/basic-toast-demo.json"

How to use

Demo.tsx

"use client"

import React, { useState } from "react"
import { AnimatePresence } from "motion/react"

import BasicToast, { ToastType } from "@/components/smoothui/ui/BasicToast"

const BasicToastDemo = () => {
  const [showToast, setShowToast] = useState(false)
  const [toastType, setToastType] = useState<ToastType>("success")

  const handleShowToast = (type: ToastType) => {
    setToastType(type)
    setShowToast(true)
  }

  return (
    <div className="flex flex-col gap-4 p-4">
      <div className="flex flex-wrap gap-2">
        <button
          onClick={() => handleShowToast("success")}
          className="rounded-md bg-emerald-500 px-3 py-1.5 text-sm text-white hover:bg-emerald-600"
        >
          Success Toast
        </button>
        <button
          onClick={() => handleShowToast("error")}
          className="rounded-md bg-red-500 px-3 py-1.5 text-sm text-white hover:bg-red-600"
        >
          Error Toast
        </button>
        <button
          onClick={() => handleShowToast("warning")}
          className="rounded-md bg-amber-500 px-3 py-1.5 text-sm text-white hover:bg-amber-600"
        >
          Warning Toast
        </button>
        <button
          onClick={() => handleShowToast("info")}
          className="rounded-md bg-blue-500 px-3 py-1.5 text-sm text-white hover:bg-blue-600"
        >
          Info Toast
        </button>
      </div>
      <AnimatePresence>
        {showToast && (
          <BasicToast
            message={`This is a ${toastType} message example!`}
            type={toastType}
            duration={3000}
            onClose={() => setShowToast(false)}
          />
        )}
      </AnimatePresence>
    </div>
  )
}

export default BasicToastDemo

Props

Prop	Type	Description
message	string	The toast message.
type?	"success" \| "error" \| "info" \| "warning"	Toast type (default: 'info').
duration?	number	How long to show the toast (ms, default: 3000).
onClose?	() => void	Callback when toast closes.
isVisible?	boolean	Controlled visibility (default: true).
className?	string	Optional additional class names for the toast container.