CarouselView

The CarouselLayout displays a list of tracks horizontally or vertically. Depending on the size of the container, the carousel will display as many tiles as possible and overflows the rest. The CarouselLayout uses the useVisualStableUpdate hook to ensure that tile reordering due to track updates is visually stable but still moves the important tiles (speaking participants) to the front.

import { CarouselView } from '@livekit/components-react';

const tracks = useTracks();
<CarouselLayout tracks={tracks}>
  <ParticipantTile />
</CarouselLayout>;