8bit Friend List

Component

About

An 8-bit styled friend list block. Shows a scrollable roster of players with retro avatars, online/offline/in-game status indicators, and current activity, built on the retro card and scroll-area primitives.

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

Code

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

Usage.tsx

"use client";

import FriendList from "@/components/ui/8bit-friend-list";

export default function Default() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 retro">
      <div className="w-full max-w-[500px]">
        <FriendList
          players={[
            {
              id: 1,
              name: "Freaky Knight",
              status: "online",
              avatar: "/avatars/orcdev.jpeg",
              avatarFallback: "OD",
            },
            {
              id: 2,
              name: "Shadow Mage",
              status: "offline",
              avatarFallback: "SM",
            },
            {
              id: 3,
              name: "Dragon Slayer",
              status: "ingame",
              avatarFallback: "DS",
              activity: "In Battle: playing dungeons & dragons",
            },
            {
              id: 4,
              name: "Fire Wizard",
              status: "online",
              avatarFallback: "FW",
            },
            {
              id: 5,
              name: "Ice Wizard jack frost",
              status: "offline",
              avatarFallback: "JK",
            },
            {
              id: 6,
              name: "HellRaiser",
              status: "offline",
              avatarFallback: "H",
            },
            {
              id: 7,
              name: "DarkDragon",
              status: "offline",
              avatarFallback: "D",
            },
          ]}
        />
      </div>
    </div>
  );
}