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.

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

1440pxHost theme

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.

Text

Tone

Auto-hide, ms

Replay caption

Stage background

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/toast-021?lang=en&theme=dark

2Paste into the chat

3Get it in your project

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…

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

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.

Text

Tone

Auto-hide, ms

Replay caption

Stage background

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/toast-021?lang=en&theme=dark

2Paste into the chat

3Get it in your project

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…

For developers

The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.

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.