Component

Video Grid

Adaptive participant grid for easyloops meetings — from 1:1 calls to large town-halls. Automatically picks the right column count based on participant count, or switches to a speaker spotlight + filmstrip layout.

Small group grid

Three participants render in a 2-column grid (the auto and grid modes both apply the column rule: 2–4 participants → 2 columns). The active speaker and mute state are conveyed via data attributes for CSS hooks.

Alice Chen

Bob Marley

Carol Nguyen

Large grid

Twelve participants render in a 4-column grid (10–16 → 4 columns). The column count scales automatically with participant count up to 6 columns for very large calls.

Participant 1

Participant 2

Participant 3

Participant 4

Participant 5

Participant 6

Participant 7

Participant 8

Participant 9

Participant 10

Participant 11

Participant 12

Speaker view

Pass layout="speaker" to render a large spotlight area for the active speaker and a horizontal filmstrip for the remaining participants. Use spotlightId to control which participant is spotlighted.

Maya Goldberg

Liam Torres

Priya Patel

James Kim

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { VideoGrid } from '@refraction-ui/react'
import type { VideoTileData } from '@refraction-ui/react'

const participants: VideoTileData[] = [
  { id: 'p1', name: 'Alice Chen', micState: 'on', speaking: true },
  { id: 'p2', name: 'Bob Marley', micState: 'muted' },
  { id: 'p3', name: 'Carol Nguyen', micState: 'on' },
]

export function MeetingRoom() {
  return (
    <div style={{ height: '100vh' }}>
      <VideoGrid participants={participants} layout="auto" />
    </div>
  )
}

Speaker view usage

tsx

import { VideoGrid } from '@refraction-ui/react'

export function SpeakerRoom({ participants, activeSpeakerId }) {
  return (
    <VideoGrid
      participants={participants}
      layout="speaker"
      spotlightId={activeSpeakerId}
    />
  )
}

Props

Prop	Type	Default	Description
`participants`	`VideoTileData[]`	--	List of participant data to render as tiles. Each entry: `{ id, name, micState?, speaking?, pinned? }`.
`layout`	`'auto' \| 'grid' \| 'speaker'`	`'auto'`	Grid layout mode. 'auto' chooses grid unless there is ≤1 participant. 'grid' always renders an even CSS grid. 'speaker' renders a spotlight tile + filmstrip row.
`spotlightId`	`string`	--	Participant `id` to place in the spotlight in speaker view. Falls back to the first participant when omitted.
`className`	`string`	--	Additional CSS classes to apply to the grid container.