vibecodng.com

Free MCP betaIndex and tools live

Measured entry

8bitcn-retro-mode-switcher

switchskeuomorphism

A client-side light and dark theme toggle rendered as pixel-art sun and moon icons. It ships through a shadcn registry with a theme provider, an 8bit button wrapper, and retro CSS, and relies on next-themes, Tailwind utilities, shadcn path aliases, Radix, class variance authority, and the shared cn helper.

Specimen
Harness screenshot of 8bitcn-retro-mode-switcher at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of 8bitcn-retro-mode-switcher at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of 8bitcn-retro-mode-switcher 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-retro-mode-switcher
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal33.3 KB (98.8 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 1.76s
error during build:
[vite]: Rollup failed to resolve import "class-variance-authority" from "<sandbox>re-54dd67e1f5aa/src/components/ui/8bit/button.tsx".

Verdict

A focused, working theme toggle with a distinctive retro fit, but it needs a shadcn-style setup and is not drop-in for a bare React app. Choose it when the bundled button and theme conventions match your stack; otherwise a simpler native toggle will be easier to own.

Use it if

  • Your interface already uses next-themes and the shadcn component structure.
  • You want a compact icon-only theme control that fits a retro or pixel-art visual system.
  • You are comfortable adopting the bundled 8bit button and its styling conventions.

Skip it if

  • Your app has no light and dark theme state managed by next-themes.
  • You need a standalone switch without shadcn aliases, Tailwind utilities, or shared button primitives.
  • A pixel-art control would conflict with an otherwise conventional design system.
  • You do not want the bundled provider to register a global keyboard shortcut for theme changes.

Install

Installation record for 8bitcn-retro-mode-switcher
Declared dependenciesnext-themes, radix-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

For a non-shadcn project, add next-themes and its provider, Tailwind with class-based dark-mode selectors, the shadcn Button primitive, Radix, class variance authority, clsx, tailwind-merge, the cn helper, path aliases, and the bundled retro stylesheet. Review or remove the provider's global theme hotkey if it conflicts with app shortcuts.

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

Alternatives

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