Badges

Avatar Stack

A small collaborator stack for reviews, presence, and team-owned workflows.

avatarpresenceteam

Installation

Copy and paste the code into your project.

Accessibility notes

Provide full names in accessible labels when initials represent real collaborators.

EBAIQA

3 reviewers

Preview accent

TypeScript

const people = ["EB", "AI", "QA"];

export function AvatarStack() {
  return (
    <div className="inline-flex items-center rounded-full border border-white/12 bg-[#0b0f14]/82 px-3 py-2 shadow-xl">
      <div className="flex -space-x-2">
        {people.map((person, index) => (
          <span
            key={person}
            className="grid h-9 w-9 place-items-center rounded-full border-2 border-[#0b0f14] bg-[#40E0D0]/14 text-xs font-black text-[#d8fffb]"
            style={{ zIndex: people.length - index }}
          >
            {person}
          </span>
        ))}
      </div>
      <span className="ml-3 text-xs font-semibold text-slate-300">3 reviewers</span>
    </div>
  );
}

Usage

<AvatarStack />

Related components

Prompt tuned

Badges

Prompt Badge

Beginner

A small status badge for prompt state, tuning, review, or evaluation labels.

promptstatusbadge

View component

4.2k tokens

Badges

Token Usage Pill

Beginner

A compact usage indicator for token budgets, metering, and AI billing surfaces.

tokensmeterusage

View component

Ctrl+K

Badges

Shortcut Key

Beginner

A clean keyboard shortcut badge for command hints, docs, and toolbars.

shortcutkeyboarddocs

View component