vibecodng.com

Free MCP betaIndex and tools live

Measured entry

8bitcn-dialog

dialogskeuomorphismmotion on file

A pixel-art skin for the standard shadcn dialog primitives. It ships as a registry component plus a retro stylesheet, wraps the existing dialog exports, and adds a square layered border and optional retro font treatment. It depends on a shadcn-compatible dialog, the cn helper, class-variance-authority, Tailwind theme utilities, and a Google Fonts import.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of 8bitcn-dialog at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of 8bitcn-dialog at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of 8bitcn-dialog 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-dialog
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal44.8 KB (110.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 867ms
error during build:
[vite]: Rollup failed to resolve import "class-variance-authority" from "<sandbox>re-02293f99678c/src/cut/components/ui/8bit/dialog.tsx".

Verdict

A focused visual wrapper that built and mounted cleanly, stayed contained across the tested layouts, and exposed no automated accessibility findings. Choose it for an intentionally retro product surface, but budget for its base dialog stack and replace the remote font import when policy requires it.

Use it if

  • Your interface already uses shadcn dialogs and needs a retro game-like modal without changing dialog behavior.
  • You want the title and content to share an opt-out pixel-font variant.
  • You are comfortable loading the Press Start font from Google Fonts or hosting an equivalent locally.

Skip it if

  • Your design system favors rounded, neutral overlays rather than a pronounced pixel-art frame.
  • Your content security policy or privacy requirements prohibit the bundled remote font import.
  • You need a standalone dialog implementation with no shadcn path aliases, theme tokens, or utility CSS.
  • You want extensive visual variants beyond the provided normal and retro font choices.

Install

Installation record for 8bitcn-dialog
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 a compatible Radix-based dialog module with the expected exports, configure the component path aliases, provide a cn utility and class-variance-authority, enable the referenced Tailwind theme classes, and include the retro stylesheet. Replace or self-host its Google font if remote font loading is not allowed.

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