Toast · Components

The native kit's real component, live in its web build at phone width. Follows this site's theme.

Usage

Transient, bottom-anchored, tap to dismiss. Persistent messages use Alert.

const toast = useToast(); toast.success("Saved") · .error · .warning · .info

Already in every copy of the native kit:

import { useToast, ToastProvider } from '@/components/kit/toast';

Exports: useToast, ToastProvider
Source: apps/mobile/components/kit/toast.tsx
Packages: lucide-react-native@^1.21.0, react-native-safe-area-context@~5.7.0
Installs with: @kit-native/icon, @kit-native/lib-haptics, @kit-native/lib-reduced-motion, @kit-native/lib-theme, @kit-native/lib-utils, @kit-native/text
Also searched as: snackbar, notification, message, copied
Registry JSON: /r/native/toast.json

The web kit's real component, live. Follows this site's theme.

For “done” and “undo”, not for errors that need action (use Alert next to the cause).

import { toast } from 'sonner'; toast.success('Saved')

Already in every copy of the web kit:

import { Toaster } from '@/components/ui/sonner';

Agents: the whole registry is at /llms.txt.