Browse components

Toast

Toast notifications. Mount Toaster once, then call useToast().add().

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/toast.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/toast.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/toast.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/toast.

Import

import {  ToastProvider,  Toaster,  useToast} from "@/components/ui/toast"

example.tsx

import { Button } from "@/components/ui/button"import { ToastProvider, Toaster, useToast } from "@/components/ui/toast"function Trigger() {  const toast = useToast()  return (    <Button      onClick={() =>        toast.add({          title: "Saved",          description: "Your changes have been applied.",        })      }    >      Show toast    </Button>  )}export function Example() {  return (    <ToastProvider>      <Trigger />      <Toaster />    </ToastProvider>  )}

API Reference

useToast

Base UI toast manager. Typical call: `toast.add({ title, description })`.

No additional props beyond the underlying primitive.

Toaster

Renders the viewport and stacked toasts. Mount once near the app root.

No additional props beyond the underlying primitive.

Toast

Also exported: `ToastViewport`, `ToastList`, `ToastContent`, `ToastTitle`, `ToastDescription`, and `ToastClose` for custom layouts.

No additional props beyond the underlying primitive.

Notes

Toasts enter and exit from the same edge so swipe-to-dismiss stays spatial.