Banner
Email Verification
A “confirm your address” strip where resending waits honestly: the button turns into a countdown, and the address stays in sight.
What you can change
- the email address and the message text
- the cooldown length and the waitTemplate wording
- the actionLabel and sentLabel captions
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.ru/c/banner-009?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…
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-banner-009-* variables. The countdown lives inside the button itself: a separate waiting line would jerk the strip height every second. While waiting, the button is disabled and drops to a secondary look, and aria-live="polite" reads the state out loud. The address sits next to the message: with a typo in it resending is pointless, and people need to see that. The text colour on the accent fill is derived from the accent lightness with a relative colour — a project passes one colour for both theme branches. The layout is computed from the strip own width: below 30rem the button takes the full width. The theme comes from color-scheme through light-dark(), and the component switches on a class-based dark theme by itself.
Tags
- banner
- verification
- cooldown
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…