Toast
Messages that queue, stack and swipe away, announced politely.
Features
- Queue, stack and swipe away; at most three at once.
Use it for
- Saved, copied, done.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react @base-ui/react motion lucide-react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { Toaster, useToast } from 'runets'
<Toaster>…</Toaster>
const toast = useToast(); toast.add({ title: 'Saved', description: 'Your changes are on disk.' })API
| Prop | Type | What it does |
|---|---|---|
toast.add | ({ title, description }) | Shows one (from useToast inside a Toaster). |
Accessibility
- A polite live region; never steals focus.
Source
The code is in src/kit/overlays.tsx in runets, MIT licensed.