Toast

Installation

CLI
Manual

npx @kuzenbo/cli add toast

Install the required dependencies:

npm install @kuzenbo/notifications

Copy the component source:

toast.tsx

// See source at packages/notifications/src/ui/toast/

Usage

import { ToastProvider, useToast } from "@kuzenbo/notifications";

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

function YourComponent() {
  const toast = useToast();

  return (
    <button onClick={() => toast.add({ title: "Toast notification" })}>
      Show Toast
    </button>
  );
}

Examples

Toast Types

Use semantic methods for different notification types.

const toast = useToast();

// Success toast
toast.success({
  title: "Success",
  description: "Your changes have been saved."
});

// Error toast
toast.error({
  title: "Error",
  description: "Something went wrong."
});

// Warning toast
toast.warning({
  title: "Warning",
  description: "Your trial is expiring soon."
});

// Info toast
toast.info({
  title: "Info",
  description: "This feature is in beta."
});

// Loading toast
toast.loading({
  title: "Loading",
  description: "Please wait..."
});

Promise Toast

Automatically handle loading, success, and error states.

const toast = useToast();

toast.promise(
  fetchData(),
  {
    loading: { title: "Fetching data..." },
    success: { title: "Data loaded successfully" },
    error: { title: "Failed to load data" }
  }
);

Update Toast

Update an existing toast programmatically.

const toast = useToast();

const toastId = toast.add({
  title: "Processing...",
  type: "loading"
});

// Later, update it
toast.update(toastId, {
  title: "Done!",
  type: "success"
});

Close Toast

Manually close a toast.

const toast = useToast();

const toastId = toast.add({ title: "Click to dismiss" });

// Close it
toast.close(toastId);

Stacked Toasts

Multiple toasts stack automatically.

const toast = useToast();

toast.add({ title: "First notification" });
toast.add({ title: "Second notification" });
toast.add({ title: "Third notification" });

Anchored Toasts

Position toasts relative to specific elements.

import { Toast } from "@kuzenbo/notifications";

<Toast.Root toast={toast}>
  <Toast.Positioner anchor={anchorRef}>
    <Toast.Content>
      <Toast.Title>Anchored toast</Toast.Title>
      <Toast.Description>Positioned near the trigger.</Toast.Description>
    </Toast.Content>
  </Toast.Positioner>
</Toast.Root>

Toast Sizes

Control toast size with the size prop.

const toast = useToast();

toast.add({
  title: "Small toast",
  size: "sm"
});

toast.add({
  title: "Large toast",
  size: "lg"
});

API Reference