Sonner Interactive 7 - Headless custom toast

Pro

Headless sonner toast rendered with toast.custom and fully custom markup.
Shadcn Sonner Interactive 7 component

Component Data

  • ID:sonner/sonner-interactive-7
  • Access:pro
  • Created:Aug 19, 2026
  • Type:example

Sonner Interactive 7 component design & features

This sonner example uses the shadcn Sonner component with toast.custom to render an unstyled toast. The callback receives the toast id so custom markup can dismiss it while keeping Sonner behavior.

Headless sonner components are for product notifications that need their own layout, such as inbox messages, mentions, or cards that do not fit the default title and description.