Aedis UI

Toast

Feedback after an action: Copied, Saved, Request failed.

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css
@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add toast# pnpm dlx @aedis/cli@0.1.0 add toast · yarn dlx @aedis/cli@0.1.0 add toast · bunx @aedis/cli@0.1.0 add toast

Props

PropTypeDefaultDescription
<Toaster />component—Once near the root; renders the stack in the bottom corner. labels: region, close, failed.
toast.show / success / info / warning / error(title, options?)string id—Text only. Errors are announced urgently (role="alert"); the rest politely.
useToast().failed(options?)string id—The generic failure message in the reader's language, for catch blocks.
options{ description?; timeout?; action?: { label; onClick } }—Timeout in ms (0 keeps it); paused while hovered or focused.
toast.dismiss(id)void—Close one toast.

Security

  • Text only: title and description are strings, hidden characters removed.
  • Show a message you wrote or the generic one; never the server's error text.
  • Timers pause while the stack is hovered or focused, so nobody has to race a message.