Preview

Click any button to see toast notifications

Installation

<> import.ts
import { ToastProvider, useToast } from "@/components/ui/toast"

Code

<> component.tsx
import { Toast } from "@/components/ui/toast"

<Toast />

API Reference

Toast

Toast notifications provider, hook, and container.

<> import.ts
import { ToastProvider, useToast } from "@/components/ui/toast"

Props

PropTypeDefaultDescription
children
React.ReactNode—App subtree to wrap

Examples

Example 1
<> example.tsx
// Provider at app root
<ToastProvider>
  <App />
</ToastProvider>

// In a component
const { addToast } = useToast();
addToast({ title: 'Saved', description: 'Changes saved', variant: 'success' });