Sonner
A notification surface for rendering queued toasts and browser-triggered toast events.
import { Toaster } from 'radcn/sonner'Live package example
Map the active shadcn Sonner examples to native Button triggers, RadCN toast events, and server-rendered Toaster evidence.
Demo and Types
Map the active shadcn Sonner examples to native Button triggers, RadCN toast events, and server-rendered Toaster evidence.
React onClick plus sonner toast maps to a native Button trigger, RadCN toast event payload, and app-owned action callback behavior. The upstream console.log Undo callback is represented as explicit app behavior through actionLabel/actionUrl.
toast, toast.success, toast.info, toast.warning, toast.error, and toast.promise map to explicit RadCN event payloads. toast.promise maps to app-owned orchestration that dispatches loading, then the success message Event has been created or error message Error.
import { Button } from 'radcn/button'
import { Toaster } from 'radcn/sonner'
export function SonnerPreview() {
return (
<div class="sonner-examples">
<section data-radcn-docs-sonner-family="sonner-demo">
<span
data-radcn-toast-trigger
data-toast-action-label="Undo"
data-toast-action-url="#undo"
data-toast-description="Sunday, December 03, 2023 at 9:00 AM"
data-toast-duration="0"
data-toast-title="Event has been created"
>
<Button variant="outline">Show Toast</Button>
</span>
<Toaster defaultDuration={0} />
</section>
<section data-radcn-docs-sonner-family="sonner-types">
<span data-radcn-toast-trigger data-toast-duration="0" data-toast-title="Event has been created">
<Button variant="outline">Default</Button>
</span>
<span data-radcn-toast-trigger data-toast-duration="0" data-toast-title="Event has been created" data-toast-type="success">
<Button variant="outline">Success</Button>
</span>
<span data-radcn-toast-trigger data-toast-duration="0" data-toast-title="Be at the area 10 minutes before the event time" data-toast-type="info">
<Button variant="outline">Info</Button>
</span>
<span data-radcn-toast-trigger data-toast-duration="0" data-toast-title="Event start time cannot be earlier than 8am" data-toast-type="warning">
<Button variant="outline">Warning</Button>
</span>
<span data-radcn-toast-trigger data-toast-duration="0" data-toast-title="Event has not been created" data-toast-type="error">
<Button variant="outline">Error</Button>
</span>
<span data-radcn-toast-trigger data-toast-duration="0" data-toast-title="Loading..." data-toast-type="loading">
<Button variant="outline">Promise</Button>
</span>
<Toaster defaultDuration={0} />
</section>
</div>
)
}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 { Toaster } from 'radcn/sonner'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
- Renders a named notification region containing list items with status or alert roles.
- Toast urgency controls aria-live politeness through the toast type.
- Dismiss controls are native buttons when a toast is dismissible.
- Default, success, info, and loading notifications use status semantics; warning and error use alert semantics.
Customization
- Toast position, type, action, and dismissibility are data-driven through Toaster props.
- The list, toast, icon, body, title, description, action, and dismiss parts expose stable classes and data hooks.
- Button composition stays explicit: wrap any RadCN Button in a data-radcn-toast-trigger host to dispatch a toast payload.
- Custom classes, styles, and tokens attach to public RadCN hooks instead of upstream className, data-slot, cn, or Tailwind utility internals.
Remix 3 Notes
- RadCN keeps the event bridge explicit with enhanceToaster and the RadCN toast event instead of React context.
- Initial toasts can be server-rendered, while later notifications are appended by browser enhancement.
- The upstream sonner package, next-themes, lucide icons, React client markers, React onClick handlers, console.log callbacks, vendor source, and Tailwind utilities are documented mappings or app-owned concerns, not RadCN dependencies.
- toast.promise maps to app-owned orchestration: dispatch a loading toast, then dispatch the success or error notification from the app promise branch.