@levelchat/react-components is the kit you reach for when you want a complete, working video-meeting UI in one import. Pair it with @levelchat/web-react's <LevelChatProvider> to get auto-wired components.
Available now
Twenty-two components covering the full meeting surface — each is a styled component backed by a headless hook, exported from @levelchat/react-components:
- VideoTile
The signature surface — one participant, glass chrome, name + mic + network indicators, hook-driven or prop-driven.
- ControlBar
Floating glass control bar — mic / cam / screen / leave / record buttons, slot-composable for custom layouts.
- PreJoin
Green-room gate — camera preview, mic level, device pickers, name input, Join CTA.
- ParticipantGrid
Auto-laid-out grid of VideoTiles (1×1 → 4×4 + paginated overflow). Speaker-biased sort.
- SpeakerStage
Active-speaker focus layout — one big tile + horizontal filmstrip.
- LiveBadge
LIVE pulse + viewer count + recording dot. Three sizes.
- RecordingPanel
Recording start/stop + status (composed | individual | screen-only).
- WaitingRoom
Host-side admit / reject queue with sticky "Admit all" + per-row reasons.
- ParticipantsPanel
Right-rail roster with search + host mute / promote / remove controls.
- Chat
Message list + composer with auto-scroll-to-bottom + new-message pill.
- ReactionBar
The reaction picker — a row of emoji buttons that send a live reaction; glass + plain surfaces.
- ReactionOverlay
Animated floating emoji reactions — bounded buffer, TTL eviction, reduced-motion safe.
- NetworkBanner
Inline connection-quality warning bar with dismiss + re-arm on quality recovery.
- EndCallSummary
Post-call wrap card — duration, participant count, recording + transcript links, re-join CTA.
- NoiseSuppressionToggle
Per-room DSP toggle — accessible switch + capability-aware disabled state.
- SettingsModal
Tabbed in-call settings (Audio / Video / Display) — device pickers + DSP, ESC-to-close.
- PinnedTileBar
Horizontal filmstrip of pinned tiles. Server pins win; local pins overlay on top.
- PollPanel
In-call live polls with host composer (2–6 options), upvote-style results, live or post-close reveal.
- QAPanel
Q&A queue with upvote sort + host answer-live / answer-text + status badges.
- Whiteboard
Collaborative pointer-driven canvas (normalised 0..1 strokes) with palette, widths, undo, host-only clear.
- MicIndicator
Live / muted microphone chip — glass + plain surface tiers, hook- or prop-driven.
- NetworkIndicator
Three-bucket connection-quality indicator (good / fair / poor). Bars or the 8-px corner dot used inside VideoTile.
Install
pnpm add @levelchat/react-components @levelchat/webThen import the styles in your app entry:
import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';Cross-platform parity
Every component on this page also ships natively on iOS (SwiftUI), Android (Jetpack Compose), React Native, and Flutter — the same component set, with the same names and brand tokens. See the iOS, Android, React Native, and Flutter SDK pages for copy-paste snippets. Per-component live playgrounds + recipe pages land next.