vibecodng.com

Free MCP betaIndex and tools live

Measured entry

tripled-team-section-block-shadcnui

teamminimal-flatmotion on file

A client-side React team section shipped as a shadcn registry block. It renders animated profile cards, skill badges, social controls, and a recruiting callout using Framer Motion, Lucide icons, shadcn Button, Badge, and Card primitives, Tailwind theme classes, and externally hosted DiceBear avatars.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of tripled-team-section-block-shadcnui at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of tripled-team-section-block-shadcnui at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of tripled-team-section-block-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-team-section-block-shadcnui
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical1
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal77.5 KB (142.9 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 1m 40s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/components/ui/card.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

Visually polished and responsive in the configured harness, but not ready to ship unchanged. It needs a shadcn-style setup to build and mount, and teams must fix the unnamed social buttons, contrast failures, placeholder actions, and hardcoded content before release.

Use it if

  • You need a dark, animated team grid with profiles, roles, locations, skills, and a recruiting callout.
  • Your app already uses shadcn conventions, Tailwind theme tokens, and Framer Motion.
  • You are prepared to replace the sample people, avatar URLs, placeholder social actions, and recruiting copy.

Skip it if

  • You need an accessible component that can ship unchanged, because the icon-only social buttons lack accessible names and some text has insufficient contrast.
  • You want working profile links out of the box, because the social data is not connected to the rendered controls and the controls are buttons rather than links.
  • You need a lightweight static roster without animation and interaction dependencies.
  • Your design system does not provide shadcn-style primitives, path aliases, Tailwind tokens, or the shared class-name utility.

Install

Installation record for tripled-team-section-block-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, the Radix-backed shadcn Button, Badge, and Card primitives, Tailwind theme tokens and utilities, the at-sign path alias, and the shared class-name helper under the expected library path. Then wire real links and accessible labels into the social controls.

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 team pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.