Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Components
Toaster
Times

A time utility for presenting or interacting with time values in the UI.

Tooltip

A small popup that provides extra context or hints when hovering or focusing on an element.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

Toaster

Provides an easy-to-use notification system for displaying toast messages, built with a highly customizable and accessible foundation.

Usage

Quick example to demonstrate how the <Toaster /> works out of the box.

"use client";
import React from "react";
import { Button } from "@/ui/button";
import { toast } from "sonner";

export function ToasterDemo() {
  return (
    <Button
      variant="pills"
      onClick={() => {
        const myPromise = new Promise<{ name: string }>(resolve => {
          setTimeout(() => {
            resolve({ name: "My toast" });
          }, 3000);
        });

        toast.promise(myPromise, {
          loading: "Loading...",
          success: (data: { name: string }) => {
            return {
              message: `${data.name} toast has been added`,
              description: "Custom description for the success state"
            };
          },
          error: "Error"
        });
      }}
    >
      Render toast
    </Button>
  );
}

Properties

Use the interactive configurator below to explore available customization options — like position, duration, type, and animation.

Gap
Offset
Mobile offset
Visible toasts
"use client";
import React from "react";
import { Toaster } from "@/ui/toaster";
import { Button } from "@/ui/button";
import { toast } from "sonner";

export function ToasterDemo() {
  return (
    <>
      <Toaster />
      <Button variant="pills" onClick={() => toast("Title in this case", { description: "Custom description in here." })}>
        Toast
      </Button>
    </>
  );
}

Chaining Toasts

Display icon toast notifications and/or multiple toast notifications in sequence or in grouped logic.

Icon

Display icon in front of the message.

"use client";
import React from "react";
import { Button } from "@/ui/button";
import { toast } from "sonner";

type ToastIconType = "success" | "info" | "warning" | "error" | "message" | "loading";
export function ToasterDemo({  icon="message" }: { icon: ToastIconType }) {
  return (
    <Button
      variant="pills"
      color="base"
      onClick={() => {
        toast[icon](`Show ${icon} icon.`, { description: "Displays a description along with the defined icon." });
      }}
    >
      Toast
    </Button>
  );
}

Installation

Install the required peer dependency:

pnpm add sonner
npm install sonner
yarn add sonner
bun add sonner

Oeri UI's Toaster component is powered by sonner, a minimal toast notification library with great accessibility and performance.

Configuration

Make sure to include the <Toaster /> component inside your application layout — typically after your ThemeProvider.

app/layout.tsx
import { ThemeProvider } from "@/config/themes";
import { Toaster } from "@/ui/toaster";
 
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>
          {children}
          <Toaster />
        </ThemeProvider>
      </body>
    </html>
  );
}
Add the Toaster in your root layout

API Reference

Toaster uses Sonner under the hood. For a full list of supported props and advanced usage:

  • View Sonner API Docs

Source Codes

Full working implementation you can copy and paste:

toaster.tsx