GridLayout

The GridLayout component displays the nested participants in a grid where every participants has the same size. It also supports pagination if there are more participants than the grid can display.

import { GridLayout } from "@livekit/components-react";

To ensure visual stability when tiles are reordered due to track updates, the component uses the useVisualStableUpdate hook.

<LiveKitRoom>
  <GridLayout tracks={tracks}>
    <ParticipantTile />
  </GridLayout>
<LiveKitRoom>