Toast

v1.0.0

Feedback

A notification component that appears temporarily to provide feedback.

Dependencies

@radix-ui/react-toast

framer-motion

Installation

Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/toast.json

Manual Installation

// 1. Install dependencies
npm install @radix-ui/react-toast framer-motion

// 2. Copy the component code to components/ui/toast.tsx

// 3. Usage example:
import { useToast } from "@/hooks/use-toast"
import { Button } from "@/components/ui/button"

export function MyToast() {
  const { toast } = useToast()
  
  return (
    <Button
      onClick={() => {
        toast({
          title: "Success",
          description: "Operation completed successfully",
        })
      }}
    >
      Show Toast
    </Button>
  )
}

Props

Component properties and their types

title

string

default: undefined

The toast title

description

string

default: undefined

The toast description

variant

'default' | 'destructive' | 'success'

default: 'default'

The visual style variant

duration

number

default: 5000

Duration in milliseconds

Examples

Code example for this component

Toast Variants

"use client"

import { Button } from "@/components/ui/button"
import { useToast } from "@/hooks/use-toast"

export function ToastDemo() {
  const { toast } = useToast()

  return (
    <div className="space-x-2">
      <Button
        onClick={() => {
          toast({
            title: "Success!",
            description: "Your action was completed successfully.",
            variant: "success",
          })
        }}
      >
        Success Toast
      </Button>
      <Button
        onClick={() => {
          toast({
            title: "Error!",
            description: "Something went wrong.",
            variant: "destructive",
          })
        }}
      >
        Error Toast
      </Button>
      <Button
        onClick={() => {
          toast({
            title: "Info",
            description: "Here's some information for you.",
          })
        }}
      >
        Default Toast
      </Button>
    </div>
  )
}

Registry

View the component registry file

View Registry

Live Preview

Interactive

Interactive component preview