vyrn

A toast engine for React and Next.js.

Installation

Latest version: 4.0.6

Render the toaster in the root of your app.

import { Toaster, toast } from 'vyrn'

function App() {
  return (
    
      
      
    
  )
}

Customize the type of toast and pass an options object as the second argument.

toast('Event has been created')

Swipe direction changes depending on the position.

Stack layers toasts on top of each other. Normal stacks them vertically.

Semantic surfaces for success, error, info, and warning toasts.

Close button, progress bar, and swipe dismissal.

Input fields, undo actions, live updates, and more from vyrn 4.0.6.

toast.info('Enter your name', {
  duration: 0,
  input: {
    placeholder: 'Your name',
    onSubmit: (value) => toast.success(value),
  },
})

Provider props, toast methods, and options.

Name	Type	Default	Description
position	`'top-left''top-center''top-right''bottom-left''bottom-center''bottom-right'`	'bottom-center'	Controls the viewport corner where toast notifications will be mounted.
layout	`'stack''normal'`	'stack'	Stack: toasts layer on top of each other. Normal: toasts stack vertically.
maxToasts	`number`	5	Limits the visible toast queue. Older toasts are dismissed when limit is reached.
showCloseButton	`boolean`	true	Globally renders an X button on all toasts.
swipeDirection	`'up''down''left''right'`	undefined	Gesture direction to dismiss the toast on mobile/touch devices.
richColors	`falsetrue'minimal''soft''solid'`	false	Enables semantic rich surfaces. true maps to 'minimal'; use 'soft' or 'solid' for stronger styles.

Name	Type	Default	Description
fntoast	`(message, opts?)`	—	Default toast. Returns a toast ID string for update/dismiss.
fntoast.default	`(message, opts?)`	—	Neutral toast without semantic color accent.
fntoast.success	`(message, opts?)`	—	Dispatches a success event with green accent styling.
fntoast.error	`(message, opts?)`	—	Dispatches an error event with red accent styling.
fntoast.info	`(message, opts?)`	—	Dispatches an info event with blue accent styling.
fntoast.warning	`(message, opts?)`	—	Dispatches an warning event with amber accent styling.
fntoast.custom	`(jsx: ReactNode, opts?)`	—	Render arbitrary React components within the toast wrapper.
fntoast.loading	`(message, opts?)`	—	Shows a loading spinner. Does not auto-dismiss until updated or dismissed.
fntoast.promise	`(promise, messages)`	—	Automatic loading/success/error states for async work. Supports cancel button.
fntoast.update	`(id, updates)`	—	Patch an existing toast by ID — content, type, progress, duration, and more.
fntoast.dismiss	`(id: string)`	—	Dismisses a specific toast by ID.
fntoast.clearAll	`()`	—	Removes every visible toast from the queue.

Name	Type	Default	Description
duration	`number`	5000	Time in ms before auto-dismiss. Set to 0 to disable auto-dismiss (e.g. input or loading toasts).
description	`ReactNode`	—	Secondary line of text below the main message.
className	`string`	—	Tailwind/CSS classes appended to the toast container.
style	`CSSProperties`	—	Inline styles for dynamic value injection.
icon	`ReactNode`	—	Custom icon override. Loading status shows a spinner by default.
actions	`ToastAction[]`	—	Inline action buttons (Undo, Dismiss, etc.). Rendered inline when not expandable.
input	`{ placeholder, onSubmit, className? }`	—	Inline text field with submit button. Auto-dismiss pauses while focused.
cancel	`{ label, onClick? }`	—	Secondary cancel button — commonly used with toast.promise.
onClick	`() => void`	—	Makes the entire toast surface clickable.
expandable	`boolean`	—	Tap to expand and reveal actions/input in an expanded panel.
priority	`'low''normal''high'`	'normal'	Visual emphasis — high stands out, low is subdued.
progress	`number`	—	0–100 progress value. Renders a progress bar when showProgressBar is enabled.
showCloseButton	`boolean`	—	Per-toast override for the global close button setting.

Name	Type	Default	Description
label	`string`	—	Button text.
onClick	`() => void`	—	Handler when the action is clicked.
style	`'default''primary''secondary''danger'`	'default'	Visual variant for the action button.
dismiss	`boolean`	true	Whether the toast dismisses after the action fires. Set false for actions like View.