Video Call UI React component
A complete meeting screen: participant tiles with an active-speaker ring and live audio bars, grid and speaker layouts that morph, screen sharing with a filmstrip, mute, camera, raise hand, floating emoji reactions, a chat you can type in, a people list, a running call timer, keyboard shortcuts, and leave with rejoin.
About the Video Call UI component
Video Call UI is a full meeting screen: tiles for everyone in the call, a ring around whoever is speaking, and the controls people expect, from mute and camera to screen sharing, reactions, chat and the people list.
Layouts move smoothly. Switch between grid and speaker view or start presenting, and every tile glides to its new place. Raise your hand, send a reaction and watch it float up, type in chat, or leave and rejoin.
When to use it
Use it as the interface for video meetings, webinars, interviews, tutoring sessions or support calls, connected to your real-time video SDK.
For a one-to-one call, pass two participants and the grid becomes a side-by-side view.
Installation
Add the Video Call UI component to your project with the shadcn CLI. It lands in components/video-call-ui.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/video-call-uiOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<VideoCallUI /> accepts 7 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Q4 planning" |
| participants | { id: string; name: string; role?: string; muted?: boolean; colors: [string, string] }[] | PEOPLE |
| you | string | "You" |
| startSeconds | number | 724 |
| onLeave | () => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Q4 planning"
- participants{ id: string; name: string; role?: string; muted?: boolean; colors: [string, string] }[]Default: PEOPLE
- youstringDefault: "You"
- startSecondsnumberDefault: 724
- onLeave() => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Video Call UI FAQ
- Does it include real video?
- No. The tiles are placeholders so the layout works without a camera. Put your SDK's video element inside each tile and keep the name tag, ring and badges on top.
- How is the active speaker chosen?
- The demo rotates through unmuted people every few seconds. Replace it with the speaking events from your video SDK so the ring follows the real voice.
- Which keyboard shortcuts work?
- M mutes, V turns the camera on or off, H raises your hand and Escape closes popovers. They are ignored while typing in chat.
- What happens on phones?
- Tiles use two columns, the chat and people panels slide over the call, and less-used buttons like screen sharing hide on very narrow screens.
- Is it accessible?
- Each control is a labelled toggle with aria-pressed, tiles announce name, mute and speaking state, reactions are a menu, chat messages are announced as they arrive, and the layout control is a radiogroup.
