Orvain UI

Expandable Alert

Longer notices that default to a preview, with an option to keep reading.

Get Pro to installPro18 blocksReact, Vue and Figma
MCPConnect the MCP server
Open it to read the rest
Northwind design/Billing

Payment method updated

Visa ending 4242 is now the card on file. The next invoice, on 1 November, is charged to it, and receipts go to billing@northwind.dev.

Closes after 6 seconds. Hover or focus pauses it.
Invoices
Invoice #10421 Oct · $240.00
Invoice #10311 Sep · $240.00
Invoice #10191 Aug · $220.00

More in Alerts and Toasts#

Simple Alert

Confirmations, quick status, anything that should self-dismiss

Simple Alert, ring

Quiet confirmations where the control that closes it should say when

Simple Alert, wash

Status notes that should read as part of the page, not float over it

Alert with Actions

Update prompts, confirmations that need a choice, background job results

Alert with Actions, ring

Alerts whose actions sit beside the text on wide screens

Alert with Actions, wash

A job the alert itself carries from start to finish

Expandable Alert

Longer notices that default to a preview, with an option to keep reading

Expandable Alert, ring

Notices with structured detail

Expandable Alert, wash

Notices that read like a receipt

Toast

Transient system messages, background status, compact banners

Toast, island

Apps that want one calm message at a time

Toast, lifecycle

Uploads, exports and syncs that report once

Attachment Toast

File/attachment notices, richer background-job results

Attachment Toast, upload tray

Uploading several files at once

Attachment Toast, peek

Checking an export without leaving the toast

Insight banner

Telling someone something the data noticed, at three volumes

Insight banner, volume

One insight that can be played louder or quieter

Insight banner, queue

Dashboards that notice several things at once

When to use#

  • A background job finished while the person was somewhere else in the app
  • A submission failed for a reason no single field can explain
  • A change applied and you want to offer a few seconds of Undo
  • System status shifted: a connection dropped, a sync resumed

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans