Icon Tile
Category Tile Grid
A grid of category tiles with hover: the column count is derived from the container's own width, and hovering lifts the tile with a shadow and a shift, not colour alone.
What you can change
- items — the category list: label, icon and an optional count
- the available icon set: code, design, chart, rocket, shield, spark
- each category's hue through ICON_HUE inside the file
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-008?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. Every tile is a type="button" button, so the row takes focus and is traversed from the keyboard without extra JS. The root block only declares container-type:inline-size, while the grid itself lives on a nested data-part="grid": the column count is switched through an @container aimed at that nested node (2 → 3 → 4) rather than through a window media query and not on the container itself — otherwise the query would silently fail. Hover is shown by two cues at once — a shadow and an upward shift, not by colour alone — and both are turned off under prefers-reduced-motion. The icon tile's hue comes from the inline custom property --vibeui-icontile-008-item-hue, set on the button for the particular category from items.
Tags
- icontile
- grid
- category
- hover
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…