Helpersreadyhelperhelper

Toast Event Helper

A browser-owned event helper for dispatching RadCN toasts rendered by the package Toaster.

Importimport { createToastEvent, toast } from 'radcn/toast'

Preview

Live package example

Map the five deprecated shadcn toast examples to RadCN browser events, Toaster data, actions, and error type semantics.

Deprecated Toast Parity

Map the five deprecated shadcn toast examples to RadCN browser events, Toaster data, actions, and error type semantics.

Preview

Scheduled: Catch up
Friday, February 10, 2023 at 5:57 PM
Undo

Uh oh! Something went wrong.
There was a problem with your request.
Try again

Your message has been sent.

Uh oh! Something went wrong.
There was a problem with your request.
Try again

Uh oh! Something went wrong.
There was a problem with your request.

import { Button } from 'radcn/button'
import { Toaster } from 'radcn/sonner'
import { createToastEvent, toast } from 'radcn/toast'

export function ToastPreview() {
  return (
    <div class="toast-examples">
      <span
        data-radcn-toast-trigger
        data-toast-action-label="Undo"
        data-toast-action-url="#undo"
        data-toast-description="Friday, February 10, 2023 at 5:57 PM"
        data-toast-title="Scheduled: Catch up"
      >
        <Button>Add to calendar</Button>
      </span>

      <span
        data-radcn-toast-trigger
        data-toast-action-label="Try again"
        data-toast-action-url="#try-again"
        data-toast-description="There was a problem with your request."
        data-toast-title="Uh oh! Something went wrong."
        data-toast-type="error"
      >
        <Button>Show Toast</Button>
      </span>

      <span
        data-radcn-toast-trigger
        data-toast-description="Your message has been sent."
      >
        <Button>Show Toast</Button>
      </span>

      <Toaster defaultDuration={0} />
    </div>
  )
}

export function dispatchToast() {
  toast({
    actionLabel: 'Try again',
    actionUrl: '#try-again',
    description: 'There was a problem with your request.',
    title: 'Uh oh! Something went wrong.',
    type: 'error',
  })

  window.dispatchEvent(createToastEvent({
    description: 'Your message has been sent.',
  }))
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { createToastEvent, toast } from 'radcn/toast'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

Toaster renders a named notification region while each toast uses status or alert roles based on type.
Description-only payloads are valid, so simple notifications do not need a synthetic title.
Destructive shadcn variants map to RadCN type: "error", which uses alert semantics and assertive live-region behavior.
Toast actions render as focused links with data-radcn-toast-action; richer controls stay app-owned composition.

Customization

createToastEvent and toast dispatch RADCN_TOAST_EVENT payloads from browser-owned code.
Button triggers use native attributes such as data-radcn-toast-trigger, data-toast-title, data-toast-description, data-toast-action-label, data-toast-action-url, and data-toast-type.
ToastAction maps to actionLabel and actionUrl, while useToast maps to explicit toast(), createToastEvent(), data triggers, or server-rendered Toaster state.
data-slot and Tailwind utility styling map to RadCN public hooks, classes, CSS variables, and app layout wrappers.

Remix 3 Notes

Current upstream sonner examples are tracked separately from the deprecated toast example cluster.
RadCN toast does not depend on React, Sonner, lucide, next-themes, Tailwind, Radix toast internals, or vendor source.
React click handlers map to native Button/form behavior plus browser enhancement rather than React context.
Server-rendered initial notifications belong to Toaster data; later notifications append through the explicit browser event helper.