LiveKit docs › Components › CarouselLayout

---

# CarouselLayout

The `CarouselLayout` component displays a list of tracks in a scroll container. It will display as many tiles as possible and overflow the rest.

## Import

```typescript
import { CarouselLayout } from "@livekit/components-react";

```

## Remarks

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

## Usage

```tsx
const tracks = useTracks([Track.Source.Camera]);
<CarouselLayout tracks={tracks}>
  <ParticipantTile />
</CarouselLayout>;

```

## Properties

- **`children`** _(React.ReactNode)_: 

- **`tracks`** _(TrackReferenceOrPlaceholder[])_: 

- **`orientation`** _('vertical' | 'horizontal')_ (optional): _(Optional)_ Place the tiles vertically or horizontally next to each other. If undefined orientation is guessed by the dimensions of the container.

---

This document was rendered at 2026-06-07T11:33:37.287Z.
For the latest version of this document, see [https://docs.livekit.io/reference/components/react/component/carousellayout.md](https://docs.livekit.io/reference/components/react/component/carousellayout.md).

To explore all LiveKit documentation, see [llms.txt](https://docs.livekit.io/llms.txt).