8bitcn/ui

Overview

8bitcn (8bitcn/ui) is an open-source retro 8-bit themed React component library built on top of shadcn/ui and Tailwind CSS by TheOrcDev. Designed to bring the nostalgic aesthetic of classic arcade games and retro consoles into modern web applications, 8bitcn bridges playful pixel-art styling with rigorous accessibility standards. Adopting the copy-and-paste distribution model, it allows developers to install authentic pixelated buttons, retro game HUD blocks, dialogs, and progress bars directly into their codebases with zero runtime lock-in.

Key Features

• Authentic 8-Bit Pixel Aesthetics: Handcrafted with jagged retro border-box shadows, tactile click displacements, pixel-art typography, and nostalgic gaming palettes.
• shadcn/ui Registry Compatibility: Built on the exact same architecture as shadcn. Run single CLI commands to download clean, customizable TypeScript source files.
• Accessibility by Default: Beneath the retro look lies strict modern accessibility. Every component fully supports keyboard focus rings, screen reader announcements, and WAI-ARIA states.
• Game-Ready UI Blocks: Features 35+ modular game-inspired blocks including health/mana status meters, quest logs, retro dialogs, and interactive inventory cards.

Installation & Quick Start

# Install the 8-bit button component via shadcn CLI
pnpm dlx shadcn@latest add @8bitcn/button

# Or add retro cards and status badges
pnpm dlx shadcn@latest add @8bitcn/card @8bitcn/badge

import React from 'react';
import { Button } from '@/components/ui/8bit/button';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/8bit/card';
import { Badge } from '@/components/ui/8bit/badge';

export function RetroGameLobby() {
  return (
    <Card className="max-w-md mx-auto p-4 retro-border">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-xl font-mono">PLAYER STATUS</CardTitle>
          <Badge variant="destructive">LEVEL 99</Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-4 font-mono text-sm">
        <p>HP: [██████████] 100/100</p>
        <Button variant="default" className="w-full">
          START QUEST
        </Button>
      </CardContent>
    </Card>
  );
}

Why Choose 8bitcn?

1. Instant Retro Identity: Craft unmistakable, playful, and high-impact visual identities for hackathons, gaming platforms, developer blogs, and creative campaigns.
2. Modern Engineering Foundation: Enjoy the best of both worlds: 80s arcade nostalgia on the surface, paired with modern React 19, TypeScript safety, and Tailwind flexibility underneath.