---
title: Component Library
description: Browse prebuilt RealtimeKit UI Kit components for building custom meeting interfaces.
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) 

# Component Library

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.

![Avatar](https://developers.cloudflare.com/_astro/rtk-avatar.BzbS585E.svg)⛶

`RtkAvatar`

![Audio Visualizer](https://developers.cloudflare.com/_astro/rtk-audio-visualizer.B1vXWRyf.svg)⛶

`RtkAudioVisualizer`

![Button](https://developers.cloudflare.com/_astro/rtk-button.B3s3SIbd.svg)⛶

`RtkButton`

![Clock](https://developers.cloudflare.com/_astro/rtk-clock.Du7EVvO2.svg)⛶

`RtkClock`

![Header](https://developers.cloudflare.com/_astro/rtk-header.BiEsUZBT.svg)⛶

`RtkHeader`

![Logo](https://developers.cloudflare.com/_astro/rtk-logo.CvmveBDG.svg)⛶

`RtkLogo`

![Meeting Title](https://developers.cloudflare.com/_astro/rtk-meeting-title.DUUzO_ih.svg)⛶

`RtkMeetingTitle`

![Recording Indicator](https://developers.cloudflare.com/_astro/rtk-recording-indicator.CT_Ht9Ts.svg)⛶

`RtkRecordingIndicator`

![Spinner](https://developers.cloudflare.com/_astro/rtk-spinner.CiW85bgp.svg)⛶

`RtkSpinner`

![Switch](https://developers.cloudflare.com/_astro/rtk-switch.CzkXUdv9.svg)⛶

`RtkSwitch`

![Tooltip](https://developers.cloudflare.com/_astro/rtk-tooltip.BIfpaD5u.svg)⛶

`RtkTooltip`

## UI Components

Interactive controls and interface elements.

![Control Bar](https://developers.cloudflare.com/_astro/rtk-controlbar.C4YxcYGC.svg)⛶

`RtkControlbar`

![Control Bar Button](https://developers.cloudflare.com/_astro/rtk-controlbar-button.CZQBMnNC.svg)⛶

`RtkControlbarButton`

![Dialog](https://developers.cloudflare.com/_astro/rtk-dialog.SILaBi2G.svg)⛶

`RtkDialog`

![Emoji Picker](https://developers.cloudflare.com/_astro/rtk-emoji-picker.CaX8j3yE.svg)⛶

`RtkEmojiPicker`

![Grid Pagination](https://developers.cloudflare.com/_astro/rtk-grid-pagination.DKJ3X5Kx.svg)⛶

`RtkGridPagination`

![Menu](https://developers.cloudflare.com/_astro/rtk-menu.C9KMWbAX.svg)⛶

`RtkMenu`

![Name Tag](https://developers.cloudflare.com/_astro/rtk-name-tag.wGHTsZWX.svg)⛶

`RtkNameTag`

![Notification](https://developers.cloudflare.com/_astro/rtk-notification.Do3n1g7c.svg)⛶

`RtkNotification`

![Participant Count](https://developers.cloudflare.com/_astro/rtk-participant-count.CxLbd2yH.svg)⛶

`RtkParticipantCount`

![Participant Tile](https://developers.cloudflare.com/_astro/rtk-participant-tile.j_1wiO0S.svg)⛶

`RtkParticipantTile`

![Plugin Main View](https://developers.cloudflare.com/_astro/rtk-plugin-main.DNOO4_Tu.svg)⛶

`RtkPluginMain`

## Composite Components

Complete, feature-rich components combining multiple elements.

![Chat](https://developers.cloudflare.com/_astro/rtk-chat.CA0RiA43.svg)⛶

`RtkChat`

![Grid](https://developers.cloudflare.com/_astro/rtk-grid.CZfeqwyY.svg)⛶

`RtkGrid`

![Image Viewer](https://developers.cloudflare.com/_astro/rtk-image-viewer.B5ltFAER.svg)⛶

`RtkImageViewer`

![Leave Meeting](https://developers.cloudflare.com/_astro/rtk-leave-meeting.UTk-KYGb.svg)⛶

`RtkLeaveMeeting`

![Mixed Grid](https://developers.cloudflare.com/_astro/rtk-mixed-grid.DZr6lVkg.svg)⛶

`RtkMixedGrid`

![Participants](https://developers.cloudflare.com/_astro/rtk-participants.BOkCsJBY.svg)⛶

`RtkParticipants`

![Participants Audio](https://developers.cloudflare.com/_astro/rtk-participants-audio.eIvUPjU6.svg)⛶

`RtkParticipantsAudio`

![Plugins](https://developers.cloudflare.com/_astro/rtk-plugins.4zjg6zHC.svg)⛶

`RtkPlugins`

![Polls](https://developers.cloudflare.com/_astro/rtk-polls.hqdlJT0t.svg)⛶

`RtkPolls`

![Screenshare View](https://developers.cloudflare.com/_astro/rtk-screenshare-view.BrwMCMAU.svg)⛶

`RtkScreenshareView`

![Settings](https://developers.cloudflare.com/_astro/rtk-settings.CsWuIao-.svg)⛶

`RtkSettings`

![Settings Audio](https://developers.cloudflare.com/_astro/rtk-settings-audio.CHFFN2ir.svg)⛶

`RtkSettingsAudio`

![Settings Video](https://developers.cloudflare.com/_astro/rtk-settings-video.CFt8Yu2W.svg)⛶

`RtkSettingsVideo`

![Sidebar](https://developers.cloudflare.com/_astro/rtk-sidebar.aKSWOJhh.svg)⛶

`RtkSidebar`

![Simple Grid](https://developers.cloudflare.com/_astro/rtk-simple-grid.D0tiCEP1.svg)⛶

`RtkSimpleGrid`

![Spotlight Grid](https://developers.cloudflare.com/_astro/rtk-spotlight-grid.2xkkE2_y.svg)⛶

`RtkSpotlightGrid`

## Screen Components

Full-screen views for different meeting states.

![Ended Screen](https://developers.cloudflare.com/_astro/rtk-ended-screen.CYpO8OXh.svg)⛶

`RtkEndedScreen`

![Idle Screen](https://developers.cloudflare.com/_astro/rtk-idle-screen.CN-poFx4.svg)⛶

`RtkIdleScreen`

![Meeting Screen](https://developers.cloudflare.com/_astro/rtk-meeting.CVtrTW4c.svg)⛶

`RtkMeeting`

![Setup Screen](https://developers.cloudflare.com/_astro/rtk-setup-screen.BRYS9Jjp.svg)⛶

`RtkSetupScreen`

```json
{"@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/component-library/","name":"Component Library"}}]}
```