TOAST

Non-blocking notification built on Radix UI. Slides in from bottom-right. Four semantic variants. Managed via useToast hook with auto-dismiss.

DEPS:@radix-ui/react-toast

PREVIEW

INSTALLATION

BASH

npx shadcn@latest add @scificn/toast

Then copy src/ui/toast/toast.tsx and src/ui/toast/use-toast.ts into your project.

HOOK USAGE

TSX

import { useToast } from '@/ui/toast/use-toast'

export function MyComponent() {
  const { toasts, toast, dismiss } = useToast()

  function handleAlert() {
    toast({
      title: 'SHIELD FAILURE',
      description: 'Sector 7 shields offline.',
      variant: 'CRITICAL',
      duration: 6000,    // ms before auto-dismiss (default: 4000)
    })
  }

  return <button onClick={handleAlert}>TRIGGER</button>
}

VARIANTS

variant="STATUS"

variant="WARNING"

variant="CRITICAL"

variant="INFO"

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
variant	STATUS \| WARNING \| CRITICAL \| INFO	STATUS	Controls left border color, glow, and prefix symbol.
open	boolean	—	Controlled open state (used by ToastProvider internally).
onOpenChange	(open: boolean) => void	—	Callback when open state changes.
duration	number (on toast() call)	4000	Auto-dismiss delay in milliseconds.