[ Web Proxy ]
URL:
Viewing: https://developers.cloudflare.com/realtime/realtimekit/ui-kit/api-reference/react/rtkspotlightgrid/ [Back]  [Original]

RtkSpotlightGrid Cloudflare Realtime docsSkip to content
SearchCtrlKLog in
  1. Home
  2. /Realtime
  3. /
  4. /React
  5. /RtkSpotlightGrid

RtkSpotlightGrid

Last updated Apr 21, 2026Copy as MarkdownView as MarkdownAgent setup
OverviewPropertiesUsage ExamplesBasic UsageWith Properties

A grid component that renders two lists of participants: pinnedParticipants and participants. You can customize the layout to a column view, by default is is row.

  • Participants from pinnedParticipants[] are rendered inside a larger grid.
  • Participants from participants[] array are rendered in a smaller grid.

Properties

Property Type Required Default Description
aspectRatio string - Aspect Ratio of participant tile Format: width:height
config UIConfig createDefaultConfig() UI Config
gap number - Gap between participant tiles
gridSize GridSize1 - Grid size
iconPack IconPack defaultIconPack Icon Pack
layout GridLayout1 - Grid Layout
meeting Meeting - Meeting object
participants Peer[] - Participants
pinnedParticipants Peer[] - Pinned Participants
size Size - Size
states States - States object
t RtkI18n useLanguage() Language

Usage Examples

Basic Usage

import { RtkSpotlightGrid } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkSpotlightGrid />;
}

With Properties

import { RtkSpotlightGrid } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkSpotlightGrid
      aspectRatio="example"
      gap={42}
      gridSize="md"
    />
  );
}
PreviousRtkSpinnerNextRtkSpotlightIndicator

Was this helpful?

YesNo
Edit pageReport issue
[]

Web Proxy Viewer  |  New URL  |  Original Page