Toast

Toast

Sonner-inspired toast notification system with CSS Transitions, smart stacking, and accessibility features

Installation

Install the Toast component using the nocta-ui CLI:

npx @nocta-ui/cli add toast

Import the components you need:

import { toast, Toaster } from '@/components/ui/toast';

Add the Toaster component to your app to enable toast notifications:

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

function App() {
  return (
    <>
      <YourApp />
      <Toaster />
    </>
  );
}

toast('Simple message');
toast.success('Operation successful!');
toast.warning('Please be careful');
toast.error('Something went wrong');

Prop

Type