Components
Loading preview...
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.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/8bit-friend-list"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>
);
}