Loading…
No reviews yet — be the first to review this product.
An interactive team gallery: the panel under the pointer or keyboard focus expands while the others compress into vertical name tags, revealing role and social links. Pure-CSS magnify, accessible, self-contained.
Lineup is an interactive "bento" team gallery for React 19 and TypeScript. The panel under the pointer — or keyboard focus — smoothly expands while the others compress into slim columns with vertical name tags; the expanded panel reveals the person's name, role and social links, and the photo zooms subtly. The magnify is pure CSS (no JS measuring), so it stays buttery and works on focus-within for keyboard users. It is fully self-contained: it injects its own CSS and a system font once on mount, ships with graceful avatar fallbacks (a generated gradient when a photo fails), respects prefers-reduced-motion, and is light by default with an optional dark theme. On small screens it stacks into expandable rows. Drop in your own members (name, role, photo, socials) or use the bundled placeholders. Icons via lucide-react. Original work for Assetzaar.
Requirements
So it renders exactly like the preview.
1. Install dependencies
npm install lucide-reactUpdated Jun 30, 2026
Cancel anytime