Button group
3D Social Buttons
Social links as isometric 3D tiles: on hover a tile lifts toward the viewer, the shadow stretches and the faces take the accent. In a narrow container the tiles stack into a column.
What you can change
- items — network, label and link
- label — the group name for screen readers
- accent — the tile colour on hover
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.club/c/button-group-001?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 30 minutes.
Technical notes
Self-contained: one file, no dependencies, palette in --vibeui-button-group-001-*. A server component: no hooks. Each tile is a single link; the side face and the edge are ::before and ::after with skew. The hover face shades are derived from the accent through oklch(from …), so the depth survives any colour. Telegram, GitHub, YouTube, X, Instagram and VK icons are inline SVG. The row layout switches on with a container query from 58rem.
Tags
- social
- buttons
- links
- 3d
- isometric
- hover
- telegram
- github
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…