Measured entry
kibo-avatar-stack
A small React wrapper that overlaps arbitrary avatar children with CSS masking and offers an optional hover expansion. It ships as copied TypeScript source through a shadcn registry, uses Tailwind classes and a local cn utility backed by clsx and tailwind-merge, and needs no provider or avatar primitive.
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.
| Build | OK |
|---|---|
| Mount | OK |
| Console errors | 0 |
| Uncaught page errors | 0 |
| Horizontal overflow | flagged at 375 |
| Axe critical | 0 |
| Axe serious | 1 |
| Axe moderate | 0 |
| Axe minor | 0 |
| Gzip marginal | 29.8 KB (95.3 KB build, 65.5 KB baseline) |
| Bare mode | OK |
| Provider required | NO |
| Demo used | written from the component source API |
Verdict
A focused, low-ceremony primitive that builds and mounts cleanly without a provider. Use it when you control the child avatars and container width. It is less suitable as a complete people picker because responsive overflow, semantics, fallbacks, and contrast remain the consumer's responsibility.
Use it if
- You already use Tailwind and want a compact row of avatars supplied as arbitrary React children.
- You want overlap controlled by a size prop, with optional hover spacing and no provider setup.
- You are comfortable supplying labels, image fallbacks, and accessible child content yourself.
Skip it if
- You need the stack to wrap, collapse into an overflow count, or adapt automatically in narrow containers.
- You need built-in avatar loading, fallback initials, tooltips, or accessible names.
- Your design system cannot rely on Tailwind utilities, CSS masking, or a local class-merging helper.
- You cannot review foreground and background choices for contrast in the child avatars.
Install
| Declared dependencies | clsx, tailwind-merge |
|---|---|
| Missing on install | none |
| Bare install | builds and mounts without the shadcn-style helpers |
| Provider | no provider required in the harness |
In a non-shadcn project, add Tailwind, clsx, and tailwind-merge; create an equivalent cn class-merging helper; then replace the project alias import with a resolvable local path. Ensure the build processes Tailwind utilities and supports the mask-image style used for overlap.
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/shadcnblocks/kiboAlternatives
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.
- hextaui-avatarminimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 32.7KB
- Bare
- pass
- Prov
- NO
- neobrutalism-avatarbrutalism
- Renders
- YES
- A11y
- 0
- Gzip
- 32.7KB
- Bare
- pass
- Prov
- NO
- shadcn-avatarunclassified
- Renders
- YES
- A11y
- 0
- Gzip
- 33.0KB
- Bare
- pass
- Prov
- NO
- tripled-native-avatar-expand-shadcnuiminimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 75.4KB
- Bare
- pass
- Prov
- NO
- tripled-native-avatar-with-name-shadcnuiminimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 75.5KB
- Bare
- pass
- Prov
- NO
- magicui-avatar-circlesbento
- Renders
- YES
- A11y
- 0
- Gzip
- 26.0KB
- Bare
- fail
- Prov
- NO