v1.0 is now Production Ready

vyrn

The Headless Toast System Built for Modern Web Apps

Type Safe

< 1kb Gzipped

Zero Dependencies

npminstallvyrn

Install globally or add to your project

01

Interactive Playground

vyrn.dev/preview

Toast Playground

Trigger notifications below to see animations & layout in action.

Standard Feedback

Advanced Integrations

bottom-center — stack

Configuration

Position on Screen

Swipe Interaction

Appearance & Features

Props Preview

Preview Configuration

Current Configuration:

<Toaster
position="bottom-center"
swipeDirection="left"
maxToasts{5}
layout="stack"
showCloseButton{false}
showProgressBar{true}
color{true}
/>

02

Integration

1. Provider Setup

App.tsx

typescript

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

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

2. Component Implementation

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 
});

03

API Reference

Provider Configuration

Prop Name	Type / Signature	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.

Methods & Functions

Prop Name	Type / Signature	Default	Description
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 Name	Type / Signature	Default	Description
duration	`number`	5000	Time 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.