8-bit Scroll Area

Component 12

About

Pixel-art scroll area from 8bitcn.com — overflow container with retro chunky scrollbar styling.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds 8-bit Scroll Area to your project and fits it to your theme.

Code

How 8-bit Scroll Area is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ScrollArea } from "@/components/ui/8bit-scroll-area";

const ITEMS = [
  "Phoenix Down",
  "Megalixir",
  "Hi-Potion",
  "Ether",
  "Elixir",
  "Gold Needle",
  "Maiden's Kiss",
  "Mallet",
  "Holy Water",
  "Antidote",
  "Eye Drops",
  "Echo Screen",
];

export default function Default() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden">
      <ScrollArea className="h-48 w-64 border-2 border-foreground p-3 font-pixel">
        <div className="space-y-2 text-sm">
          {ITEMS.map((item, i) => (
            <div key={item} className="flex items-center justify-between border-b border-foreground/30 pb-1">
              <span>{item}</span>
              <span className="text-xs text-muted-foreground">×{(i + 1) * 2}</span>
            </div>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}