Toast

Transient messages from a provider, with six docks, promise handling and timers that pause when you aren't looking.

Source: 1 file
Dependencies: framer-motion
Playground: no

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

Types

toast({ title, description, variant: "success" })

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { ToastProvider, useToast } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

framer-motion

Usage

toast-example.tsx

import { ToastProvider, useToast } from "kipui";

// Once, near the root:
<ToastProvider position="bottom-right" limit={3}>
  {children}
</ToastProvider>

// Anywhere below it:
const toast = useToast();

toast.promise(saveChanges(), {
  loading: "Saving…",
  success: "Saved",
  error: "Could not save",
});

Timers pause on hover and on a hidden tab, so a toast can't expire while nobody is watching.
`limit` drops the oldest toast per dock rather than stacking without end.
The variant decides whether the region announces as `alert` or `status` — errors interrupt, confirmations don't.

API reference

Transcribed from the component's own types. Props with no default are required.

ToastProvider

Prop	Default	Description
position"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"	Default dock for toasts that don't pass their own.
appearance"solid" \| "soft" \| "outline"	"solid"	Default surface treatment.
limitnumber	3	Max toasts per dock; oldest are dropped first.

useToast()

Prop	Default	Description
toast(options)(options: ToastOptions) => string	required	Shows a toast and returns its id.
toast.promise(promise, messages) => Promise	required	Loading, success and error states from one promise.
toast.update(id, options) => void	required	Rewrites a toast in place.
toast.dismiss(id?: string) => void	required	Dismisses one toast, or all of them.