Toast Notification
A succinct message that is displayed temporarily in a corner of the screen. Built with Radix UI primitives and Framer Motion for high-quality interactions, it supports default and destructive variants, titles, and descriptions.
Live Interactive Preview
Source
npx futureuikit add toast Details
Built with Radix UI Toast primitives for accessibility.Supports Default and Destructive variants.Animated with Framer Motion for smooth entry and exit.Customizable titles, descriptions, and action buttons.Auto-dismiss functionality with configurable delays.Stackable notifications with a dedicated viewport.
How to Use?
- Add the Toaster component to your root layout (src/app/layout.tsx).
- Ensure Toaster is used as a self-closing component: <Toaster />.
- Use the useToast hook from '@/hooks/use-toast' to trigger notifications.
- Pass title and description strings to the toast function.
- Customize the variant to 'destructive' for error messages.