Call grid

A React component in Beamline's Voice & audio category.

The people on a video call, laid out for the room they are given: tiles as large as the space allows at the camera's shape, or the person talking (or a shared screen, or whoever you pin) large with everyone else in a strip; a ring that follows whoever is speaking, muted microphones, raised hands and weak connections said in words, a face when the camera is off, and the rest folded into "+N" when there are more people than room.

Use it for

A video or audio meeting between people: show who is on the call, who is talking, who is muted, and a shared screen.
A live session with a host and guests (webinar, interview, support call with video).

Not for

The controls of a voice call with an agent (conversation-bar).
A recording to play back (video).
The faces of who is here without a call (avatar-group).

Anatomy

stage: the room given, as a size container
grid layout: every tile at the camera's shape (16:9), as large as fits, rows centred
speaker layout: one tile large (pinned, else a shared screen, else whoever spoke last), the others in a strip below that scrolls when long
tile: the camera (a stream, or a still), or the person's face on their colour when the camera is off, or a shared screen's own drawing; name and 'You' at the bottom with a crossed microphone when muted; a raised hand and a weak-connection mark at the top; Pin at the top end on hover or focus
speaking ring: an outline in the accent, brighter with the voice's level
overflow tile: '+N' with the first names of those not shown
a live line for assistive tech: joins, leaves and raised hands

Variants

layout: auto (speaker when someone is pinned or sharing, else grid), grid, speaker

States

speaking
muted
camera off
hand raised
weak connection
reconnecting
pinned
sharing a screen
you
overflow

Keyboard

The tiles are one tab stop: arrow keys move between them, Home/End go to the ends
Enter or Space pins the tile (the speaker layout centres on it) and again unpins; Escape unpins
Each tile is named with its state: 'Dana Ruiz, speaking, hand raised'

Motion

Tiles keep their path: a join grows in, a leave fades out while the others slide to close the room, and switching layout moves each tile to its new place and size (useFlip). The speaking ring brightens and dims with the level, holding a moment after the voice stops so it does not flicker between words; the large tile changes speaker only after a person has spoken for a second. Reduced motion: tiles jump, the ring shows on or off.

Props

Prop	Type	Default	Description
`participants` (required)	`CallParticipant[]`	—
`layout`	`"auto" \| "grid" \| "speaker"`	—	Default auto.
`pinned / defaultPinned / onPinnedChange`	`string \| null`	—
`max`	`number`	—	Most tiles in the grid before the rest fold into +N. Default 12.
`label`	`string`	—	What the call is. Default "Call".
`className / classNames / style / ref`	`root`	—

Built from

avatar
button

Dependencies

lucide-react

Import

import { CallGrid } from "@/components/call-grid/call-grid";

Get it

Call grid is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent