Roll Call

Component

About

A list of names where hovering or focusing a row dims the rest, turns the chosen name into an italicized serif in its own accent colour, and slides its role in on a monospace rail.

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

Code

How Roll Call is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { RollCall } from "@/components/ui/roll-call";

const team = [
  { name: "Masar", role: "Product & frontend", color: "#7c9cff" },
  { name: "Wally", role: "Mobile app", color: "#ff7fb6" },
  { name: "OCS", role: "Website & design system", color: "#4fd68a" },
  { name: "TransOcean", role: "Logistics platform", color: "#ffc35c" },
  { name: "Vitrine", role: "Component library", color: "#5fd6e8" },
];

export default function Demo() {
  return (
    <div className="flex min-h-full w-full items-center justify-center bg-[#0c0b0a] p-8">
      <RollCall people={team} className="w-full max-w-xl" />
    </div>
  );
}