vibecodng.com

Free MCP betaIndex and tools live

Measured entry

8bitcn-hero2

heroskeuomorphism

A split-layout React hero with optional badges, calls to action, custom children, and a replaceable visual. It ships as a shadcn registry block with retro CSS and pixel-styled wrappers around shadcn Badge and Button, and it expects Next.js Link, Tailwind classes, the cn helper, path aliases, and a default image asset.

Specimen
Harness screenshot of 8bitcn-hero2 at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of 8bitcn-hero2 at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of 8bitcn-hero2 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 8bitcn-hero2
BuildOK
MountOK
Console errors1
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor1
Gzip marginal51.3 KB (116.7 KB build, 65.4 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

CONSOLE

Failed to load resource: the server responded with a status of 404 (Not Found)

BARE BUILD

✗ Build failed in 1.09s
error during build:
[vite]: Rollup failed to resolve import "class-variance-authority" from "<sandbox>re-384becc1bb8e/src/components/ui/8bit/badge.tsx".

Verdict

A focused retro hero, but not publishable as a working drop-in. The registry build fails because its pixel badge wrapper imports a base shadcn Badge that is not included. It needs a shadcn-style setup, plus a manual fix to the missing primitive, before evaluation or use.

Use it if

  • You already run a shadcn-style Next.js app and want a retro landing-page hero.
  • You need configurable badges, linked or callback actions, and a swappable visual slot.
  • You are willing to repair the registry item and supply the default image or your own visual.

Skip it if

  • You need a registry item that builds without manual dependency repair.
  • Your project does not use Next.js, Tailwind utilities, or shadcn path aliases.
  • Your design system cannot accommodate the externally loaded retro font or pixel styling.

Install

Installation record for 8bitcn-hero2
Declared dependenciesradix-ui, clsx, tailwind-merge
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 cn utility and alias mapping, Tailwind theme utilities, base Badge and Button primitives, class-variance-authority, Radix UI, Next.js Link support or a router replacement, the retro stylesheet and font loading, and the referenced image asset. Ensure the base primitives resolve before importing the pixel wrappers.

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/TheOrcDev/8bitcn-ui
License
MIT
Record published
2026-08-15

Alternatives

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