vibecodng.com

Free MCP betaIndex and tools live

Measured entry

tripled-avatar-group-shadcnui

avatarminimal-flatmotion on file

A client-side React avatar stack distributed as a shadcn registry component. It ships with a fixed sample roster, entrance and hover motion, hover-only identity cards, and a collaborator badge. It depends on Framer Motion, Lucide React, Tailwind utilities, shadcn theme tokens, and the registry's UI dependencies.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of tripled-avatar-group-shadcnui at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of tripled-avatar-group-shadcnui at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of tripled-avatar-group-shadcnui at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for tripled-avatar-group-shadcnui
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal60.0 KB (125.4 KB build, 65.4 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 974ms
error during build:
[vite]: Rollup failed to resolve import "lucide-react" from "<sandbox>re-0ab3a726366b/src/cut/components/uitripled/avatar-group-shadcnui.tsx".

Verdict

A polished starting point for shadcn dashboards, but not ready to drop into production unchanged. Fix the invalid ARIA usage, add keyboard-accessible identity details, make the badge responsive, and replace the embedded sample data before adoption.

Use it if

  • You need a compact collaborator summary for a dashboard or project header.
  • Your interface already uses Tailwind and shadcn-compatible theme tokens.
  • Motion on entry and hover suits the surrounding interaction style.
  • You are prepared to replace the fixed sample roster with application data.

Skip it if

  • The group must fit a narrow mobile container without responsive changes.
  • You need accessible keyboard-triggered identity details without revising the markup.
  • Adding an animation library is not justified for a small avatar treatment.
  • You want real profile photos or variable group sizes with no component refactor.

Install

Installation record for tripled-avatar-group-shadcnui
Declared dependenciesframer-motion, react, radix-ui
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, add React, Framer Motion, Lucide React, Radix UI, and Tailwind CSS. Define shadcn-compatible card, border, primary, and muted foreground theme tokens, or replace those utility classes with local styles. The declared button registry dependency appears unused by this source.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/moumen-soliman/uitripled
License
MIT
Record published
2026-08-14

Alternatives

Other published entries for the avatar pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.