Toasts built for real products.

Configure behavior, test interactions, then copy exact code for React and Next.js.

Modes

false / minimal / soft / solid

Flow

configure / preview / ship

npminstallvyrn
Install globally or add to your project
live previewbottom-center / stack

Standard Feedback

Advanced Integrations

Playground Configuration

Tune dismissal gestures, appearance and layout behavior.

Position on Screen

Swipe Interaction

Appearance & Features

Rich Colors Mode

Live Configuration

updates instantly
toaster.config.tsx

Integration

Copy and paste provider setup and component usage.

1. Provider Setup

Add one `Toaster` near the app root with your chosen interaction settings.

App.tsx
typescript
// App.tsx or main.tsx
import { Toaster } from 'vyrn';

function App() {
  return (
    <>
      
      {/* Your app content */}
    
  );
}

2. Component Implementation

Trigger toast methods from any client component when user actions occur.

Component.tsx
typescript
import { toast } from 'vyrn';

// Basic usage
toast.success('Success message');
toast.error('Error message');
toast.info('Info message');
toast.warning('Warning message');

// With options
toast('Custom message', { 
  type: 'success',
  duration: 5000 
});

Build Checklist

Use this order for fastest adoption.

1Install `vyrn` in your app.
2Place one `<Toaster />` at app root.
3Trigger `toast.success/error/info` inside client components.
4Set `richColors` mode per your UI theme.
Suggested default
richColors="minimal" + layout="stack"
npminstallvyrn
Install globally or add to your project

API Reference

Provider props and toast methods in one place.

Provider Configuration

Prop NameType / SignatureDefaultDescription
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
5Limits the visible toast queue. Older toasts are dismissed when limit is reached.
showCloseButton
boolean
trueGlobally renders an X button on all toasts.
swipeDirection
'up''down''left''right'
undefinedGesture direction to dismiss the toast on mobile/touch devices.
richColors
falsetrue'minimal''soft''solid'
falseEnables semantic rich surfaces. true maps to 'minimal'; use 'soft' or 'solid' for stronger styles.

Methods & Functions

Prop NameType / SignatureDefaultDescription
fntoast.success
(message: string, opts?)
—Dispatches a success event with green accent styling.
fntoast.error
(message: string, opts?)
—Dispatches an error event with red accent styling.
fntoast.info
(message: string, opts?)
—Dispatches an info event with blue accent styling.
fntoast.warning
(message: string, opts?)
—Dispatches a warning event with amber accent styling.
fntoast.custom
(jsx: ReactNode, opts?)
—Render arbitrary React components within the toast wrapper.
fntoast.dismiss
(id?: string)
—Dismisses a specific toast by ID, or all toasts if no ID is passed.
fntoast.promise
(promise, messages)
—Automatic state handling (loading/success/error) for async functions.

Toast Options Object

Prop NameType / SignatureDefaultDescription
duration
number
5000Time in ms before auto-dismiss. Set to Infinity or 0 to disable.
className
string
—Tailwind/CSS classes appended to the toast container.
style
CSSProperties
—Inline styles for dynamic value injection.
action
{ label: string, onClick: fn }
—Renders a primary action button alongside the text.
cancel
{ label: string, onClick: fn }
—Renders a secondary cancel button.