RtkGrid (2)

Last updated Oct 19, 2026 The main grid component which abstracts all the grid handling logic and renders it for you.

Properties

Property Type Required Default Description
aspectRatio string ✅ - The aspect ratio of each participant
config UIConfig ❌ createDefaultConfig() Config object
gap number ✅ - Gap between participants
gridSize GridSize ✅ - Grid size
iconPack IconPack ❌ defaultIconPack Icon pack
layout GridLayout ✅ - Grid Layout
meeting Meeting ✅ - Meeting object
overrides any ✅ - Deprecated
size Size ✅ - Size
states States ✅ - States
t RtkI18n ❌ useLanguage() Language

Usage Examples

Basic Usage

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

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

With Properties

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

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

Was this helpful?

YesNo

On this page

RtkGrid (2) - 图1Docs

{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react/rtkgrid/#page","headline":"RtkGrid","description":"API reference for RtkGrid component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react/rtkgrid/","inLanguage":"en","image":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react/rtkgrid/og.png?v=515ca2287a49b4e3","dateModified":"2026-10-19","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}

description: API reference for RtkGridPagination component (React Library) title: RtkGridPagination image: https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react/rtkgridpagination/og.png?v=e5272e9f91aade2a

Skip to content

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt
Use this file to discover all available pages before exploring further.