Icon Tile
Integration Status Tile
An integration tile: a monogram in place of a foreign logo, the service name, and the connection status doubled as a dot and text.
What you can change
- name — the service name the monogram is derived from
- status — connected, pending or disconnected
- tone — the monogram tile's hue
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/icontile-011?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
Server component, no hooks. The service logo is not a library of other people's svg brands but a monogram from the first letters of name, computed by the getInitials function at runtime, so the tile works with any name without an icon set. The connection status is declared twice: by the colour of the data-part="dot" dot and by the text beside it from the STATUS_LABEL table — colour alone does not read under a colour vision deficiency. On a narrow container the status is hidden through @container, while the monogram and the name always remain.
Tags
- icontile
- integration
- status
- connection
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…