Toast

Brief notifications that appear after an action and dismiss themselves, managed through one provider.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-toast and follow the Siteplane Toast skill it prints for this task.

Paste this into your agent.

Toast gives short feedback that doesn't block work, such as Saved, Upload complete or an undo prompt. One toast can follow a task from loading to success or error.

Install

bashnpx shadcn@4.18.0 add @siteplane/toast

Import it from @/siteplane/components/toast. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Alert: Pick Alert instead for a message that should stay in the page until the problem is resolved.
  • vs Alert Dialog: Pick Alert Dialog instead when the person must decide something before going on.

Rules

  • Mount ToastProvider once near the app root.
  • Set type for a status icon and also say the outcome in the title.
  • Use promise() for a task that settles later, or keep the id from add() and call update or close.
  • Do not put blocking or form errors only in a toast; show them beside the field as well.
  • Implement the operation behind actionProps, such as undo, in your app; the toast only renders the button.

Reference

  • Toast docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Feedback. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-toast

MCP server

https://www.uiskillbook.com/mcp

Questions