Toast
Center Pill Toast
A compact top-center pill toast: it drops in from the top, sits above the content, and hides on its own or via the close button.
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 text through message, the icon through glyph and the tone through tone
- the auto-hide length through autoHideMs
- the captions through closeLabel, replayLabel and stageHint
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-021?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
<Toast021
message="Update installed"
tone="success"
autoHideMs={3200}
/>A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Text
message· default: Update installed- Tone
tone· default: success- Auto-hide, ms
autoHideMs· default: 3200- Replay caption
replayLabel· default: Show again- Stage background
background· default: theme colour
More in Toast
FAQ
- How do I add Center Pill 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 Center Pill Toast depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Center Pill Toast?
- Adapt: the text through message, the icon through glyph and the tone through tone; the auto-hide length through autoHideMs; the captions through closeLabel, replayLabel and stageHint. Keep as installed: the position:relative stage around the pill — without it “top-center” turns into position:fixed against the window, and the component must stay inside its own area; the pill's placement via position:absolute with translateX(-50%), not margin:auto — so it doesn't depend on the parent's width; auto-hide through an autoHideMs timer with an explicit off switch at 0, not a hardcoded interval.
- Is Center Pill 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-021.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-021-* variables. Client-side: "use client". The gridded stage with position:relative depicts an application window — without it there is nothing to show "top-centre" against; the pill lies inside it with position:absolute and translateX(-50%) and drops in from the top through keyframes. Auto-hide is a timer in useEffect driven by autoHideMs (0 switches it off), the cross hides the pill by hand at any moment, and the "Show again" button toggles key so that the entrance animation replays. The theme comes from the surrounding color-scheme through light-dark(): the pill is always the opposite of the stage in lightness, so in the dark branch it is light and the surface of the cross on it is darker. The background prop replaces only the stage surface, and the stage caption is exposed through stageHint.
Tags
- toast
- pill
- compact
- hud
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…