Toast Component

Non-intrusive notification toasts powered by Sonner. Supports success, error, warning, and info variants with Catppuccin theming.

Basic Toast

Trigger different toast types.

With Actions

Toasts with action and cancel buttons.

Promise Toast

A toast that tracks a promise through loading, success, and error states.

Setup

Add the Toaster component to your root layout to enable toasts globally.

import { Toaster } from "@/ui/sonner"

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Toaster />
    </>
  )
}

Installation

npx shadcn@latest add https://catppuccin-components.vercel.app/r/sonner.json