--- title: UI Kit Addons description: Extend RealtimeKit UI Kit with addon components for host controls, reactions, and more. image: https://developers.cloudflare.com/dev-products-preview.png --- > 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. [Skip to content](#%5Ftop) # UI Kit Addons A collection of UI Kit addons that extend RealtimeKit's prebuilt UI Kit capabilities with additional interactive components and controls for enhanced meeting experiences. This page is not available for the **iOS, Android, Flutter, React Native**platform. WebMobile ReactWeb ComponentsAngular Note UI Kit Addons are currently only available for web platforms (React, Web Components, and Angular). Mobile platform support (iOS, Android, Flutter, and React Native) is not available at this time. The UI Kit addons library provides the following categories of components: #### Host Controls Host controls allow meeting hosts to manage participant permissions: * **Camera Host Control** \- Control participant camera permissions * **Mic Host Control** \- Control participant microphone permissions * **Chat Host Control** \- Control participant chat permissions #### Reactions Interactive engagement features for participants: * **Hand Raise** \- Allow participants to raise their hand to signal they want to speak * **Reactions Manager** \- Display emoji reactions during meetings #### Participant Tile Customize the participant tile interface: * **Participant Tile Menu** \- Add custom menu options to participant tiles #### Participant Tab Actions Add custom actions to the participants tab: * **Participant Menu Item** \- Add custom menu items to participant actions * **Participants Tab Action** \- Add custom action buttons to the participants tab * **Participants Tab Toggle** \- Add custom toggle controls to the participants tab #### Video Background Apply visual effects to participant video: * **Video Background** \- Apply blur or virtual backgrounds to video streams #### Control Bar Customize the meeting control bar: * **Custom Control Bar Button** \- Add custom buttons to the control bar ## Installation npm yarn pnpm bun ``` npm i @cloudflare/realtimekit-ui-addons ``` ``` yarn add @cloudflare/realtimekit-ui-addons ``` ``` pnpm add @cloudflare/realtimekit-ui-addons ``` ``` bun add @cloudflare/realtimekit-ui-addons ``` npm yarn pnpm bun ``` npm i @cloudflare/realtimekit-ui-addons ``` ``` yarn add @cloudflare/realtimekit-ui-addons ``` ``` pnpm add @cloudflare/realtimekit-ui-addons ``` ``` bun add @cloudflare/realtimekit-ui-addons ``` npm yarn pnpm bun ``` npm i @cloudflare/realtimekit-ui-addons ``` ``` yarn add @cloudflare/realtimekit-ui-addons ``` ``` pnpm add @cloudflare/realtimekit-ui-addons ``` ``` bun add @cloudflare/realtimekit-ui-addons ``` ## Usage ``` import { useState, useEffect } from "react";import { RealtimeKitProvider, useRealtimeKitClient,} from "@cloudflare/realtimekit-react";import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";import { registerAddons, defaultConfig } from "@cloudflare/realtimekit-ui"; // Import addonsimport CameraHostControl from "@cloudflare/realtimekit-ui-addons/camera-host-control";import MicHostControl from "@cloudflare/realtimekit-ui-addons/mic-host-control";import ChatHostControl from "@cloudflare/realtimekit-ui-addons/chat-host-control";import HandRaise from "@cloudflare/realtimekit-ui-addons/hand-raise";import ReactionsManagerAddon from "@cloudflare/realtimekit-ui-addons/reactions-manager";import ParticipantTileMenu from "@cloudflare/realtimekit-ui-addons/participant-tile-menu";import ParticipantMenuItem from "@cloudflare/realtimekit-ui-addons/participant-menu-item";import ParticipantsTabAction from "@cloudflare/realtimekit-ui-addons/participants-tab-action";import ParticipantsTabToggle from "@cloudflare/realtimekit-ui-addons/participants-tab-toggle";import RealtimeKitVideoBackground from "@cloudflare/realtimekit-ui-addons/video-background";import CustomControlbarButton from "@cloudflare/realtimekit-ui-addons/custom-controlbar-button"; function App() { const [meeting, initMeeting] = useRealtimeKitClient(); const [authToken, setAuthToken] = useState(""); const [config, setConfig] = useState(defaultConfig); useEffect(() => { if (authToken) { initMeeting({ authToken: authToken, }); } }, [authToken]); useEffect(() => { const initializeAddons = async () => { if (!meeting) return; // Initialize addons const cameraHostControl = await CameraHostControl.init({ meeting, hostPresets: ["webinar_presenter"], targetPresets: ["webinar_viewer"], addActionInParticipantMenu: true, }); const micHostControl = await MicHostControl.init({ meeting, hostPresets: ["webinar_presenter"], targetPresets: ["webinar_viewer"], addActionInParticipantMenu: true, }); const chatHostControl = await ChatHostControl.init({ meeting, hostPresets: ["webinar_presenter"], targetPresets: ["webinar_viewer"], addActionInParticipantMenu: true, }); const handRaise = await HandRaise.init({ meeting, canRaiseHand: true, canManageRaisedHand: true, handRaiseIcon: '', }); const CUSTOM_REACTIONS = [ { emoji: "๐Ÿ”ฅ", label: "fire" }, { emoji: "๐Ÿ˜ข", label: "sad" }, { emoji: "๐Ÿ‘", label: "thumbs up" }, { emoji: "๐Ÿ‘Ž", label: "thumbs down" }, { emoji: "โค๏ธ", label: "heart" }, { emoji: "๐Ÿ˜‚", label: "laugh" }, { emoji: "๐Ÿ‘", label: "clap" }, { emoji: "๐ŸŽ‰", label: "celebrate" }, ]; const reactionsAddon = await ReactionsManagerAddon.init({ meeting, reactions: CUSTOM_REACTIONS, canSendReactions: true, }); const participantTileMenu = new ParticipantTileMenu( [ { label: "Custom Toggle", onClick: (participantId) => { console.log("Clicked on custom toggle for ", participantId); }, }, ], "top-right", ); const rightTickSVG = ""; const participantMenuItem = new ParticipantMenuItem({ label: "Custom Menu Item", icon: rightTickSVG, styles: "rtk-icon { color: green !important; }", onClick: () => { alert("Participant Menu Item clicked"); }, }); const participantsTabAction = new ParticipantsTabAction({ onClick: () => { alert("Clicked!"); }, label: "Click me", position: "start", }); const participantsTabToggle = new ParticipantsTabToggle({ onEnabled: () => { alert("toggled true!"); }, onDisabled: () => { alert("toggled false!"); }, label: "Click me", initialValue: () => true, position: "start", }); const videoBackground = await RealtimeKitVideoBackground.init({ modes: ["blur", "virtual", "random"], blurStrength: 30, meeting, images: [ "https://images.unsplash.com/photo-1487088678257-3a541e6e3922?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3", "https://images.unsplash.com/photo-1496715976403-7e36dc43f17b?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3", "https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3", ], randomCount: 10, onVideoBackgroundUpdate: ({ backgroundMode, backgroundURL }) => { console.log("videoBackgroundUpdated => ", { backgroundMode, backgroundURL, }); }, }); const customControlBarButton = new CustomControlbarButton({ position: "left", icon: '', label: "Click Me!", onClick: () => alert("Custom Control Bar Button Clicked"), }); // Register addons const newConfig = registerAddons( [ cameraHostControl, micHostControl, chatHostControl, handRaise, reactionsAddon, participantTileMenu, participantMenuItem, participantsTabAction, participantsTabToggle, videoBackground, customControlBarButton, ], meeting, ); setConfig(newConfig); }; initializeAddons(); }, [meeting]); return ( );} ``` Note If you are using `RtkUiProvider` instead of the `RtkMeeting`, pass the `meeting` and `config` objects to the provider: ``` {/* Your custom UI components here */} ``` Add the UI Kit library to your HTML: ``` ``` Place the `rtk-meeting` component in your HTML file: ``` ``` Initialize the meeting and configure addons in your script: ``` ``` Note If you are using `rtk-ui-provider` instead of the `rtk-meeting`, pass the `meeting` and `config` objects to the provider: ``` ``` In your component template, add the meeting component: ``` ``` In your component TypeScript file: TypeScript ``` import { Component, OnInit } from "@angular/core";import RealtimeKitClient from "@cloudflare/realtimekit";import { registerAddons, defaultConfig } from "@cloudflare/realtimekit-ui"; // Import addonsimport CameraHostControl from "@cloudflare/realtimekit-ui-addons/camera-host-control";import MicHostControl from "@cloudflare/realtimekit-ui-addons/mic-host-control";import ChatHostControl from "@cloudflare/realtimekit-ui-addons/chat-host-control";import HandRaise from "@cloudflare/realtimekit-ui-addons/hand-raise";import ReactionsManagerAddon from "@cloudflare/realtimekit-ui-addons/reactions-manager";import ParticipantTileMenu from "@cloudflare/realtimekit-ui-addons/participant-tile-menu";import ParticipantMenuItem from "@cloudflare/realtimekit-ui-addons/participant-menu-item";import ParticipantsTabAction from "@cloudflare/realtimekit-ui-addons/participants-tab-action";import ParticipantsTabToggle from "@cloudflare/realtimekit-ui-addons/participants-tab-toggle";import RealtimeKitVideoBackground from "@cloudflare/realtimekit-ui-addons/video-background";import CustomControlbarButton from "@cloudflare/realtimekit-ui-addons/custom-controlbar-button"; @Component({ selector: "app-meeting", templateUrl: "./meeting.component.html",})export class MeetingComponent implements OnInit { meeting: any; config: any = defaultConfig; async ngOnInit() { // Initialize meeting this.meeting = await RealtimeKitClient.init({ authToken: "", }); // Initialize addons const cameraHostControl = await CameraHostControl.init({ meeting: this.meeting, hostPresets: ["webinar_presenter"], targetPresets: ["webinar_viewer"], addActionInParticipantMenu: true, }); const micHostControl = await MicHostControl.init({ meeting: this.meeting, hostPresets: ["webinar_presenter"], targetPresets: ["webinar_viewer"], addActionInParticipantMenu: true, }); const chatHostControl = await ChatHostControl.init({ meeting: this.meeting, hostPresets: ["webinar_presenter"], targetPresets: ["webinar_viewer"], addActionInParticipantMenu: true, }); const handRaise = await HandRaise.init({ meeting: this.meeting, canRaiseHand: true, canManageRaisedHand: true, handRaiseIcon: '', }); const CUSTOM_REACTIONS = [ { emoji: "๐Ÿ”ฅ", label: "fire" }, { emoji: "๐Ÿ˜ข", label: "sad" }, { emoji: "๐Ÿ‘", label: "thumbs up" }, { emoji: "๐Ÿ‘Ž", label: "thumbs down" }, { emoji: "โค๏ธ", label: "heart" }, { emoji: "๐Ÿ˜‚", label: "laugh" }, { emoji: "๐Ÿ‘", label: "clap" }, { emoji: "๐ŸŽ‰", label: "celebrate" }, ]; const reactionsAddon = await ReactionsManagerAddon.init({ meeting: this.meeting, reactions: CUSTOM_REACTIONS, canSendReactions: true, }); const participantTileMenu = new ParticipantTileMenu( [ { label: "Custom Toggle", onClick: (participantId: string) => { console.log("Clicked on custom toggle for ", participantId); }, }, ], "top-right", ); const rightTickSVG = ""; const participantMenuItem = new ParticipantMenuItem({ label: "Custom Menu Item", icon: rightTickSVG, styles: "rtk-icon { color: green !important; }", onClick: () => { alert("Participant Menu Item clicked"); }, }); const participantsTabAction = new ParticipantsTabAction({ onClick: () => { alert("Clicked!"); }, label: "Click me", position: "start", }); const participantsTabToggle = new ParticipantsTabToggle({ onEnabled: () => { alert("toggled true!"); }, onDisabled: () => { alert("toggled false!"); }, label: "Click me", initialValue: () => true, position: "start", }); const videoBackground = await RealtimeKitVideoBackground.init({ modes: ["blur", "virtual", "random"], blurStrength: 30, meeting: this.meeting, images: [ "https://images.unsplash.com/photo-1487088678257-3a541e6e3922?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3", "https://images.unsplash.com/photo-1496715976403-7e36dc43f17b?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3", "https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3", ], randomCount: 10, onVideoBackgroundUpdate: ({ backgroundMode, backgroundURL }: any) => { console.log("videoBackgroundUpdated => ", { backgroundMode, backgroundURL, }); }, }); const customControlBarButton = new CustomControlbarButton({ position: "left", icon: '', label: "Click Me!", onClick: () => alert("Custom Control Bar Button Clicked"), }); // Register addons this.config = registerAddons( [ cameraHostControl, micHostControl, chatHostControl, handRaise, reactionsAddon, participantTileMenu, participantMenuItem, participantsTabAction, participantsTabToggle, videoBackground, customControlBarButton, ], this.meeting, ); }} ``` Note If you are using `rtk-ui-provider` instead of the `rtk-meeting` component, pass the `meeting` and `config` objects to the provider: ``` ``` ## Programmatic Control Some addons support programmatic control for dynamic changes during a meeting. #### Video Background You can apply, replace, or remove video backgrounds programmatically: TypeScript ``` // Apply a virtual backgroundawait videoBackground.applyVirtualBackground( "https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3",); // Apply a blur backgroundawait videoBackground.applyBlurBackground(); // Remove background (return to normal video)await videoBackground.removeBackground(); ``` Some addons support programmatic control for dynamic changes during a meeting. #### Video Background You can apply, replace, or remove video backgrounds programmatically: TypeScript ``` // Apply a virtual backgroundawait videoBackground.applyVirtualBackground( "https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3",); // Apply a blur backgroundawait videoBackground.applyBlurBackground(); // Remove background (return to normal video)await videoBackground.removeBackground(); ``` Some addons support programmatic control for dynamic changes during a meeting. #### Video Background You can apply, replace, or remove video backgrounds programmatically: TypeScript ``` // Apply a virtual backgroundawait videoBackground.applyVirtualBackground( "https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3",); // Apply a blur backgroundawait videoBackground.applyBlurBackground(); // Remove background (return to normal video)await videoBackground.removeBackground(); ``` ```json {"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/addons/#page","headline":"UI Kit Addons ยท Cloudflare Realtime docs","description":"Extend RealtimeKit UI Kit with addon components for host controls, reactions, and more.","url":"https://developers.cloudflare.com/realtime/realtimekit/ui-kit/addons/","inLanguage":"en","image":"https://developers.cloudflare.com/dev-products-preview.png","dateModified":"2026-05-11","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/realtime/","name":"Realtime"}},{"@type":"ListItem","position":3,"item":{"@id":"/realtime/realtimekit/","name":"RealtimeKit"}},{"@type":"ListItem","position":4,"item":{"@id":"/realtime/realtimekit/ui-kit/","name":"Build using UI Kit"}},{"@type":"ListItem","position":5,"item":{"@id":"/realtime/realtimekit/ui-kit/addons/","name":"UI Kit Addons"}}]} ```