About
A ready-check roster card that shows each player's ready/waiting status and a searching-for-match indicator, for multiplayer matchmaking screens.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Matchmaking Lobby to your project and fits it to your theme.
Code
How Matchmaking Lobby is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import * as React from "react";
import {
MatchmakingLobby,
type LobbyPlayer,
} from "@/components/ui/matchmaking-lobby";
export default function MatchmakingLobbyDemo() {
const [players, setPlayers] = React.useState<LobbyPlayer[]>([
{ id: "p1", name: "ADA", ready: true },
{ id: "p2", name: "ROW C", ready: true },
{ id: "p3", name: "MAX", ready: false },
{ id: "p4", name: "REX", ready: false },
]);
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6 text-foreground">
<MatchmakingLobby
className="max-w-xs"
players={players}
searching={players.some((p) => !p.ready)}
onToggleReady={(id) =>
setPlayers((prev) =>
prev.map((p) => (p.id === id ? { ...p, ready: !p.ready } : p)),
)
}
/>
</div>
);
}
More by f0rextasy
View all
Newsletter Signup Card
8
Stamp Seal
7
Network Graph
7
Board Checklist
5
Empty State Card
3
Running Order Timeline
3
Time Input
3
Data Table
3