vibecodng.com

Free MCP betaIndex and tools live

Measured entry

ruixen-profile-card

buttonglassmorphismmotion on file

A client-side React profile card with full-image and split-layout variants, follow and favorite actions, a verified badge, and hover motion. It ships as a shadcn registry component built around Tailwind classes, Next.js Image, React state, Lucide icons, and the usual cn utility.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of ruixen-profile-card at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-profile-card at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-profile-card 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 ruixen-profile-card
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical1
Axe serious0
Axe moderate0
Axe minor1
Gzip marginal35.5 KB (100.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 45.93s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/profile-card.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A solid visual starting point for an existing shadcn-style Next.js app, but not a safe copy-paste demo as supplied: missing props leave the card empty and trigger image text and heading accessibility failures. It needs a shadcn-style setup, real profile data, and an accessibility pass.

Use it if

  • You need a portrait-led creator or member card with follow and favorite actions.
  • Your app already uses Next.js, Tailwind, Lucide, and shadcn-style path aliases.
  • You want a choice between image-overlay content and a separate details panel.

Skip it if

  • You need a framework-neutral React component without Next.js Image or alias conventions.
  • You cannot guarantee that every card receives a valid name, image, biography, and stats.
  • You need an accessible drop-in demo without first supplying real profile data and checking control labels.

Install

Installation record for ruixen-profile-card
Declared dependencieslucide-react
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 Tailwind styling, Lucide React, Next.js Image support or replace it with your image component, create the cn class-merging helper, and configure the at-sign source alias. Supply every required profile prop and add an accessible label to the icon-only favorite button.

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/ruixenui/ruixen.com
License
MIT
Record published
2026-08-14

Alternatives

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