Toast
Return Toast
A batch undo with a ring timer instead of a bar: seconds count down inside the ring, and the “Restore” button brings several items back in one action.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
What you can change
- the action text through message and the after-undo text through returnedMessage
- the button caption through returnLabel
- the countdown copy through countdownText with its {seconds} placeholder and expiredText
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.club/c/toast-013?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
How to use
<Toast013
message="5 emails moved to archive"
seconds={6}
onReturn={handleReturn}
/>A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Message
message· default: 5 emails moved to archive- Button label
returnLabel· default: Restore- Seconds to undo
seconds· default: 6- Ring colour
tone· default: theme colour- Background
background· default: theme colour
More in Toast
FAQ
- How do I add Return Toast with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Return Toast depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Return Toast?
- Adapt: the action text through message and the after-undo text through returnedMessage; the button caption through returnLabel; the countdown copy through countdownText with its {seconds} placeholder and expiredText. Keep as installed: the conic-gradient ring driven by the --vibeui-toast-013-percent variable — the ring's fraction and the center number come from one piece of state; pausing on hover and focus through a ref, not a re-render on every tick; the ring turning into a checkmark after “Restore” instead of the card disappearing.
- Is Return Toast free?
- Yes. The preview is open without an account; with a free account you can copy up to 20 components a month.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/toast-013.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
Technical notes
The component is self-contained: one file, no dependencies, its own palette in the local --vibeui-toast-013-* variables. The theme comes from the surrounding color-scheme through light-dark(), while the background prop replaces only the card surface. The timer is a conic-gradient whose fraction of the circle is computed from the --vibeui-toast-013-percent variable, and the number of seconds in the centre of the ring duplicates the same value as text, so the countdown is readable both by eye and aloud through aria-live. Hover and focus pause the timer through a ref rather than through a re-render. After "Restore" is pressed the ring turns into a checkmark and the button disappears — the state is held by useState, the component is client-side. Every caption is exposed as a prop: message, returnedMessage, returnLabel, expiredText and the countdownText template with its {seconds} placeholder.
Tags
- toast
- undo
- batch
- timer
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…