# Vyrn — Integration Guide
**Docs & live playground:** [vyrn.vercel.app](https://vyrn.vercel.app/)
```bash
npm install vyrn
```
No `transpilePackages`, no CSS import, no provider wrapper. The stylesheet is
injected by the package and `` already carries `'use client'`.
---
## React (Vite, CRA, Remix SPA)
```tsx
// App.tsx
import { Toaster, toast } from 'vyrn';
export default function App() {
return (
<>
);
}
```
`` is self-closing — it does not need to wrap your app. Put it
anywhere that stays mounted.
---
## Next.js — App Router
```tsx
// app/layout.tsx (stays a Server Component)
import { Toaster } from 'vyrn';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
```tsx
// app/page.tsx
'use client';
import { toast } from 'vyrn';
export default function Page() {
return ;
}
```
### Where `toast()` can be called
`toast()` is a browser-side call. It is fine in:
- Client Components (`'use client'`)
- event handlers and effects
- module scope of a client bundle — it queues until `` mounts
It is **not** available during server rendering, so you cannot call it in the
body of a Server Component or inside a Server Action to notify the browser. To
toast after a Server Action, return a value and toast from the client:
```tsx
'use client';
import { toast } from 'vyrn';
import { saveSettings } from './actions';
export function SaveButton() {
return (
);
}
```
---
## Next.js — Pages Router
```tsx
// pages/_app.tsx
import { Toaster } from 'vyrn';
export default function App({ Component, pageProps }) {
return (
<>
);
}
```
---
## Configuration
```tsx
```
Full prop and option tables: [README.md](./README.md).
---
## Recipes
### Undo
```tsx
toast(`"${file.name}" deleted`, {
action: { label: 'Undo', onClick: () => restore(file) },
});
```
### Async work
```tsx
toast.promise(uploadFile(file), {
loading: 'Uploading…',
success: (res) => `Uploaded ${res.name}`,
error: (err) => (err as Error).message,
});
```
### One toast for a whole flow
```tsx
const id = toast.loading('Processing…');
toast.update(id, { content: 'Almost there', progress: 60 });
toast.success('Done', { id }); // same toast — no duplicate
```
### Determinate progress
```tsx
toast(`Uploading ${pct}%`, { id: 'upload', progress: pct, duration: 0 });
```
### Inline input
```tsx
toast('What should we call it?', {
duration: 0,
input: {
placeholder: 'Name',
onSubmit: (value) => toast.success(`Saved as ${value}`),
},
});
```
The countdown pauses while the field has focus.
### Persistent toast
```tsx
toast.error('Connection lost', { duration: Infinity, dismissible: false });
```
### Confirm before acting
```tsx
toast('Delete this project?', {
duration: 0,
actions: [{ label: 'Delete', style: 'danger', onClick: remove }],
cancel: { label: 'Keep' },
});
```
### Custom styling
```tsx
```
Or opt out entirely and render your own markup:
```tsx
toast.custom(undefined, {
unstyled: true,
jsx:
Fully custom
,
});
```
---
## Troubleshooting
**Nothing appears.** Confirm `` is mounted somewhere that stays
mounted, and that the component calling `toast()` is a Client Component.
**Toasts sit behind a modal.** Raise `zIndex` on ``.
**Dark mode isn't picked up.** Vyrn follows `prefers-color-scheme` by default.
If your app toggles a class instead, either keep using `.dark` / `[data-theme]`
on an ancestor, or pass `theme` explicitly and drive it from your theme provider.
**Styles clash with a CSS reset.** Vyrn's stylesheet is injected at the top of
``, so your own rules win at equal specificity — target
`[data-vyrn-toast]` or `.vyrn-toast`.