Components
Loading preview...
Pixel-art scroll area from 8bitcn.com — overflow container with retro chunky scrollbar styling.
npx shadcn@latest add https://21st.dev/r/theorcdev/8bit-scroll-area"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>
);
}