Inputs & feedback

Toast

ToastProvider + useToast hook. Glass-strong cards with a 4px gradient accent rail. Optional title, description, icon. Auto-dismiss with progress.

Toast is the kit's notification primitive — a <ToastProvider> you mount once and a useToast() hook anywhere in the tree. Glass-strong cards with a 4px gradient accent rail keyed to the toast's variant (info / success / warning / danger). Auto-dismiss with a progress indicator so users can watch their time tick down.

Each toast supports an optional title, description, and icon — for small confirmations, drop the title and pass a one-liner. For big moments ("Goal reached!"), include all three.

Live preview

Example

tsx

import { ToastProvider, useToast } from '@kidcash/ui';

function App() {
  return <ToastProvider>{/* your tree */}</ToastProvider>;
}

function MyButton() {
  const { toast } = useToast();
  return <button onClick={() => toast('Saved.', { variant: 'success', icon: '🏆' })}>Save</button>;
}

Want all 27 in one place?

The home playground shows every component side-by-side. Or install @kidcash/ui and use Toast in your own app.

← Previous

Tooltip

Modal