Toast

Beautiful toast notifications with progress bar and colored variants

Preview

Installation

Sonner

Base Toaster component with theming support

npm

pnpm

yarn

bun

npx shadcn@latest add @gooseui/sonner

Custom Toast

Toast with animated progress bar and colored border

npm

pnpm

yarn

bun

npx shadcn@latest add @gooseui/custom-toast

Toast Utility

Helper functions for easy toast calls

npm

pnpm

yarn

bun

npx shadcn@latest add @gooseui/toast

Setup

Add Toaster component to your root layout

// app/layout.tsx
import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster position="top-right" />
      </body>
    </html>
  )
}

Usage

import { customToast } from "@/lib/toast"

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

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

// Warning toast
customToast.warning("Warning!", {
  description: "Please check your input"
})

// Info toast
customToast.info("Info", {
  description: "New update available"
})

Variants

Variant	Color	Icon
success	Green	CircleCheckIcon
error	Red	OctagonXIcon
warning	Amber	TriangleAlertIcon
info	Blue	InfoIcon

Props

Prop	Type	Default	Description
message	string	-	Toast title text
description	string	undefined	Optional description text
duration	number	4000	Duration in milliseconds