vibecodng.com

Free MCP betaIndex and tools live

Measured entry

tripled-web-performance-page-shadcnui

statsminimal-flatmotion on file

A client-side React dashboard page that presents fixed Core Web Vitals, a score gauge, resource rows, and optimization tips with Framer Motion transitions. It ships as a shadcn registry component and relies on Tailwind theme tokens, aliased Badge and Button primitives, Lucide icons, and the declared React, Framer Motion, and Radix UI dependencies.

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

Verdict

A credible dashboard scaffold with responsive behavior and useful information hierarchy, but it is demo content rather than an audit feature. It needs a shadcn-style setup to build, and the accessibility findings should be fixed before production use.

Use it if

  • You need a polished static shell for a performance report and will connect the cards and actions to real audit data.
  • Your app already follows shadcn conventions for component aliases, theme tokens, and utility classes.
  • You want a responsive dashboard layout with restrained entrance and hover motion.

Skip it if

  • You need a working performance analyzer out of the box, since the displayed metrics and resource list are fixed examples.
  • Your accessibility bar requires a clean audit before adoption; the icon-only download control lacks a name, text contrast is insufficient, and the page structure has heading and main-landmark issues.
  • You need a lightweight stats block rather than a full page with animation and icon dependencies.
  • Your application already owns the top-level main landmark and you do not want to restructure this component before embedding it.

Install

Installation record for tripled-web-performance-page-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 the aliased Badge and Button primitives, the shared class-name utility at the expected lib path, Tailwind configuration with the referenced theme tokens, Lucide icons, Framer Motion, React, and the Radix packages used by the primitives. Preserve or rewrite the alias imports, then add an accessible label to the download action and correct contrast and landmark structure.

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