Sonner

Stackable, swipeable toast notifications fired imperatively from anywhere — confirmations, async results, and undoable actions that don't demand attention. Built on the sonner library, skinned with Tidal tokens. Use this (not Toast) for almost everything: richer toast() API, auto-stacking, promise wiring, and zero open-state plumbing. Reach for Alert instead when the message must stay inline and persistent, or Dialog/AlertDialog when it blocks the user until acknowledged. Tone comes from the call: toast() neutral, toast.success / .error / .warning / .info for status, toast.loading or toast.promise for async — add an action ({ label, onClick }) for one-tap follow-ups like Undo. There is no size prop; toasts size to content and sit in the corner set on the single root Toaster.

Setup

Render a single <Toaster /> near the root of your app (typically in the root layout). Then call toast(...) from anywhere — no provider wiring, no open-state plumbing. Pass theme={resolvedTheme} from next-themes so Sonner's own dark mode tracks the page.

Default

import { toast } from "@liquidai/react";

toast("Event has been scheduled", {
  description: "Sunday, December 03, 2023 at 9:00 AM",
});

Success

toast.success("Changes saved", {
  description: "Your preferences have been updated.",
});

Error

toast.error("Couldn't save changes", {
  description: "Check your connection and try again.",
});

With action

toast("Event has been scheduled", {
  description: "Sunday, December 03, 2023 at 9:00 AM",
  action: {
    label: "Undo",
    onClick: () => toast("Scheduling reverted"),
  },
});

Props

Component / API	Notable props
Toaster	position ("bottom-right" \| "top-right" \| "bottom-center" \| …), theme ("light" \| "dark" \| "system"), richColors, closeButton, expand, visibleToasts, duration, offset, …
toast()	title (string \| ReactNode), options: { description, action: { label, onClick }, cancel, duration, id, icon, … }
toast.success / error / info / warning / loading	Same signature as toast(); varies the icon / accent.
toast.promise(p, { loading, success, error })	Wire a toast to a Promise — swaps loading → success/error on settle.
toast.dismiss(id?)	Programmatically dismiss one or all toasts.

Source

packages/react/src/components/sonner.tsx · Figma node 2819:30654