Stacked, swipe-to-dismiss notifications with success, error and info variants.
npx shadcn@latest add @lokalhost/toastThe source is copied to components/ui/toast.tsx — it’s yours to edit.
import { Button } from "@/components/ui/button";
import { ToastProvider, useToast } from "@/components/ui/toast";
<Button onPress={() => toast.show({ title: "Payment sent", description: "$24.00 to Amelia Hart", variant: "success" })}>
Show success
</Button>
<Button variant="secondary" onPress={() => toast.show({ title: "Upload failed", variant: "error" })}>
Show error
</Button>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | — | Toast heading. |
description | string | undefined | Supporting text. |
variant | "default" | "success" | "error" | "default" | Icon and accent colour. |
duration | number | 3500 | Auto-dismiss delay in ms. |
<ToastProvider> | component | — | Wrap your app once; call useToast().show(options) anywhere. |