vibecodng.com

Free MCP betaIndex and tools live

Measured entry

kokonut-team-selector

teamdark-futuristicmotion on file

A compact team-size stepper that reveals overlapping member avatars as the count changes. It ships as a shadcn registry client component with internal React state, Tailwind utility classes, Next Image, Motion animations, Lucide icons, and remote DiceBear avatars for its default roster. It accepts custom members, a starting value, a label, and a change callback.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of kokonut-team-selector at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of kokonut-team-selector at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of kokonut-team-selector 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 kokonut-team-selector
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal68.2 KB (133.6 KB build, 65.4 KB baseline)
Bare modeOK
Provider requiredNO
Demo usedwritten from the component source API

Verdict

A focused, usable choice for picking from a small known roster. It builds and mounts cleanly without provider scaffolding and holds its layout across viewports, but the contrast failure needs correction before release. The internal-only value model, Next coupling, and animation cost make it less suitable as a general-purpose form control.

Use it if

  • You need a small roster picker where the allowed count is tied directly to a known member list.
  • Your product already uses Next, Tailwind utilities, Motion, and Lucide icons.
  • You want animated avatar feedback, keyboard-operable controls, and reduced-motion handling without adding a provider.
  • You can supply your own member records and treat the callback as the handoff to form or booking state.

Skip it if

  • You need arbitrary quantities or an empty-team state, since the range is fixed by the supplied roster and never drops below one member.
  • You need a fully controlled value that can be updated by parent state after mount.
  • Your accessibility bar requires the component to pass contrast checks without local color changes.
  • You cannot accept a sizable animation dependency for a narrowly scoped selector.
  • You are outside Next or Tailwind and do not want to adapt the image component and utility-based styling.

Install

Installation record for kokonut-team-selector
Declared dependenciesmotion, lucide-react
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn project, copy the client component, install Motion and Lucide React, and make sure Tailwind processes its utility classes. Keep Next Image in a Next app or replace it with your image layer. Supply local member images if remote DiceBear requests are not acceptable, and adjust the muted text colors to meet your contrast requirements. No context provider is required.

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/kokonut-labs/kokonutui
License
MIT
Record published
2026-08-14

Alternatives

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