Icon Stack
Surface Ring Stack
A stack whose ring matches the surface: the same group is shown on a light and a dark strip, making it obvious that the ring is the background, not a white border.
What you can change
- the ring and light strip fill through ring
- the dark strip caption through label
- the group roster through names
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/iconstack-005?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
A server component, no hooks. The ring colour is exposed through the --vibeui-iconstack-005-ring variable and set on the strip rather than on the circle: the dark strip overrides it with its own background, while the light strip takes the value from the ring prop and paints its own fill with it. Because of that the ring physically cannot drift away from the surface. Both strips are shown at once so that the difference reads without switching the theme. The overlap is built with a reversed flex row, and the circle hue is derived from the name with a hash. There is no outer surface by default: the body follows the surrounding color-scheme through light-dark(), while both strips deliberately keep fixed tones — that is what the demonstration rests on.
Tags
- iconstack
- ring
- surface
- contrast
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…