Avatar
Expandable Stack Count
A stack whose "+N" counter is an entrance rather than a dead end: the disclosure runs on details, so the names are available without a line of client code.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
What you can change
- the number of visible circles through max
- the group caption and the roster through names
- the circle size through the --vibeui-iconstack-003-size variable
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/iconstack-003?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…
How to use
<Iconstack003
names={["Anna Rebrova", "Ilya Mokhov", "Kim Son", "Pyotr Gai", "Maria Loza"]}
max={4}
label="members"
/>A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Visible circles
max· default: 4- Group caption
label· default: members- Background
background· default: theme colour
More in Avatar
FAQ
- How do I add Expandable Stack Count with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Expandable Stack Count depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Expandable Stack Count?
- Adapt: the number of visible circles through max; the group caption and the roster through names; the circle size through the --vibeui-iconstack-003-size variable. Keep as installed: the local --vibeui-iconstack-003-* palette — do not swap it for your theme tokens; details instead of JS state: the disclosure works before hydration and without client code; the visible focus ring on summary — otherwise the tap target is invisible from the keyboard.
- Is Expandable Stack Count free?
- Yes. The preview is open without an account; with a free account you can copy up to 20 components a month.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/iconstack-003.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
Technical notes
A server component, no hooks: the disclosure is held by native details, the state lives in the DOM. The stack and the counter sit inside summary, whose default marker is removed (list-style: none and ::-webkit-details-marker) and which gets a visible focus ring — summary is focusable by tab, and without the ring the tap target is invisible. The counter is placed to the left of the stack: on the right it reads as one more member. The overlap is built with a reversed flex row, and the circle hue is derived from the name with an FNV hash. There is no surface by default: the card sits on the page background, and the palette is built on light-dark() and follows the surrounding color-scheme.
Tags
- iconstack
- details
- overflow
- avatars
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…