Component Library

Last updated Oct 19, 2026 The UI Kit components library provides a comprehensive set of pre-built, customizable components that you can use to build your own custom meeting interface.

WebMobile

ReactWeb ComponentsAngular

Note

All UI Kit components are built on top of Web Components, regardless of which framework (React/Angular) you use. They render as Web Components in the browser DOM.

Component naming conventions:

• Web Components and Angular: Use kebab-case (e.g., rtk-meeting)
• React: Use PascalCase (e.g., RtkMeeting)

React and Angular components are wrappers around the same underlying Web Components, so functionality is identical across all frameworks.

Component Gallery

Search through the comoponent gallery for the component you need.

Basic Components

Small, reusable building blocks for your UI.

⛶

RtkAvatar

⛶

RtkAudioVisualizer

⛶

RtkButton

⛶

RtkClock

⛶

RtkHeader

⛶

RtkLogo

⛶

RtkMeetingTitle

⛶

RtkRecordingIndicator

⛶

RtkSpinner

⛶

RtkSwitch

⛶

RtkTooltip

⛶

RtkSpeakerSelector

⛶

RtkMicrophoneSelector

⛶

RtkCameraSelector

UI Components

Interactive controls and interface elements.

⛶

RtkControlbar

⛶

RtkControlbarButton

⛶

RtkDialog

⛶

RtkEmojiPicker

⛶

RtkGridPagination

⛶

RtkMenu

⛶

RtkNameTag

⛶

RtkNotification

⛶

RtkParticipantCount

⛶

RtkParticipantTile

⛶

RtkPluginMain

Composite Components

Complete, feature-rich components combining multiple elements.

⛶

RtkChat

⛶

RtkGrid

⛶

RtkImageViewer

⛶

RtkLeaveMeeting

⛶

RtkMixedGrid

⛶

RtkParticipants

⛶

RtkParticipantsStageList

⛶

RtkParticipantsStageQueue

⛶

RtkPolls

⛶

RtkParticipantsAudio

⛶

RtkPlugins

⛶

RtkScreenshareView

⛶

RtkSettings

⛶

RtkSettingsAudio

⛶

RtkSettingsVideo

⛶

RtkDebugger

⛶

RtkDebuggerSystem

⛶

RtkDebuggerAudio

⛶

RtkDebuggerVideo

⛶

RtkDebuggerScreenshare

⛶

RtkSidebar

⛶

RtkSimpleGrid

⛶

RtkSpotlightGrid

⛶

RtkBreakoutRoomManager

⛶

RtkBreakoutRoomsManager

⛶

RtkBreakoutRoomToggle

Screen Components

Full-screen views for different meeting states.

⛶

RtkEndedScreen

⛶

RtkWaitingScreen

⛶

RtkIdleScreen

⛶

RtkMeeting

⛶

RtkSetupScreen

Was this helpful?

YesNo

On this page

Docs

{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/component-library/#page","headline":"Component Library","description":"Browse prebuilt RealtimeKit UI Kit components for building custom meeting interfaces.","url":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/component-library/","inLanguage":"en","image":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/component-library/og.png?v=a74842d247ec418b","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: Add a custom controlbar to your RealtimeKit meeting UI with individual components. title: Add Custom Controlbar image: https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/custom-controlbar/og.png?v=7919b7c9ed298bee

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.