vibecodng.com

Free MCP betaIndex and tools live

Measured entry

8bitcn-character-sheet

statsskeuomorphism

A pixel-art RPG profile card delivered as a shadcn registry block. It renders identity, resource meters, attributes, secondary stats, equipment, and custom sections from React props. It brings themed Card, Badge, Avatar, Progress, and Separator pieces, uses Tailwind utilities and Radix primitives, and imports a retro stylesheet with a hosted font.

Specimen
Harness screenshot of 8bitcn-character-sheet at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of 8bitcn-character-sheet at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of 8bitcn-character-sheet 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-character-sheet
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal37.8 KB (103.3 KB build, 65.5 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 930ms
error during build:
[vite]: Rollup failed to resolve import "class-variance-authority" from "<sandbox>re-23e768b7b090/src/cut/components/ui/8bit/blocks/character-sheet.tsx".

Verdict

A focused, usable character summary that builds and mounts without a provider, with flexible section controls and a convincing retro treatment. Adopt it only if you can fix the unnamed progress meters and tune the narrow layout, where the current presentation overflows.

Use it if

  • You are building an RPG profile, companion panel, or game-themed account summary with health, mana, experience, attributes, and equipment.
  • Your interface already embraces a pixel-art visual language and can accommodate the supplied retro font and heavy borders.
  • You want optional sections and custom React content without adding a context provider.

Skip it if

  • You need a narrow mobile layout that never clips or scrolls horizontally without component-level adjustments.
  • You require accessible resource meters out of the box, since the progress bars lack accessible names.
  • You need a neutral or compact stats card that should inherit an unrelated product style with minimal restyling.
  • You expect equipment rarity to change the presentation, since rarity is accepted as data but is not rendered.

Install

Installation record for 8bitcn-character-sheet
Declared dependenciesradix-ui, @radix-ui/react-progress, @radix-ui/react-separator, 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

For a non-shadcn project, add Tailwind with compatible theme tokens, the path alias and class-merging helper, base Card and Badge primitives, the required Radix primitives, class variance utilities, clsx, and tailwind-merge. Copy the supplied themed components and retro stylesheet, and decide whether its externally hosted font fits your loading and privacy policy.

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-16

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.