vibecodng.com

Free MCP betaIndex and tools live

Measured entry

8bitcn-alert-dialog

dialogskeuomorphismmotion on file

A pixel-art confirmation dialog shipped as a shadcn registry component. It wraps the shadcn alert-dialog and its Radix behavior, then adds Tailwind classes, variant utilities, a local cn helper, retro CSS, and a Google-hosted pixel font.

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

Verdict

A solid themed wrapper when the pixel aesthetic is intentional. It built, mounted, adapted across the tested viewports, and produced no reported accessibility violations. The tradeoff is substantial styling and dependency overhead for a narrowly themed confirmation dialog.

Use it if

  • Your product already uses a retro or arcade visual language and destructive confirmations should match it.
  • You want Radix dialog behavior with responsive action layout and a ready-made pixel treatment.
  • Your app already follows shadcn conventions, including Tailwind, path aliases, and a shared cn helper.

Skip it if

  • Your interface uses a neutral, corporate, or native-platform design where the pixel styling would feel out of place.
  • Your content security policy or offline requirements prohibit loading the imported Google font.
  • You want a dependency-light dialog and do not otherwise use the shadcn and Radix stack.
  • You need a theme-ready primitive without decorative border markup embedded in each action.

Install

Installation record for 8bitcn-alert-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 the shadcn alert-dialog base, Radix alert-dialog support, Tailwind, class variance utilities, clsx and tailwind-merge through a cn helper, the configured path aliases, and the supplied retro stylesheet. Allow the Google font request or self-host an equivalent font.

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.