Toaster

Toast notification component powered by Sonner. Provides elegant, accessible toast notifications with better UX than traditional toasts.

Installation

# Install @opencosmos/ui to use Toaster
pnpm add @opencosmos/ui

Preview

Loading preview...

Usage

Import

import { Toaster } from '@opencosmos/ui';

Example

<Toaster>
  Content
</Toaster>

Eject

Copy this component into your project for full customization

Code Examples

Setup

Add Toaster to root layout

// Add to your root layout
import { Toaster } from "@opencosmos/ui"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Usage

Using toast notifications

import { toast } from "sonner"

// Show a toast
toast("Event has been created")

// Success toast
toast.success("Profile updated")

// Error toast
toast.error("Something went wrong")

// With action
toast("Event created", {
  action: {
    label: "Undo",
    onClick: () => console.log("Undo"),
  },
})