LevelChatDocs
Docs
React Components

React Components

Production-grade React UI kit for LevelChat — headless hooks + styled components + slot composition.

@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

The first three components are production-ready in Phase 0:

  • 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.

Install

pnpm add @levelchat/react-components @levelchat/web

Then import the styles in your app entry:

import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';

Coming soon

Wave 10 fills out the remaining components with the same headless-hook + styled-component pattern plus a live playground:

  • ParticipantGridSoon

    Auto-laid out grid of VideoTiles.

  • SpeakerStageSoon

    Active-speaker focus layout.

  • ChatSoon

    Per-room chat panel with reactions.

  • ReactionOverlaySoon

    Animated floating reactions.

  • LiveBadgeSoon

    LIVE pip + viewer count.

  • WaitingRoomSoon

    Pre-admit lobby for hosts.

  • RecordingPanelSoon

    Recording controls + transcript surface.

  • ParticipantsPanelSoon

    Roster + mute / kick controls.

  • CaptionsOverlaySoon

    Live captions with speaker attribution.

  • SettingsModalSoon

    Device + display preferences.

  • EndCallSummarySoon

    Post-call wrap with replay link.

  • BackgroundEffectsPickerSoon

    Blur / image background controls.

  • NoiseSuppressionToggleSoon

    Per-room DSP toggle.

  • PinnedTileBarSoon

    Pin + reorder UI for active speakers.

  • WhiteboardSoon

    Shared sketch surface.

  • PollPanelSoon

    Live polls + results.

  • QAPanelSoon

    Q&A queue with upvotes.

  • TranscriptDrawerSoon

    Searchable post-call transcript.

  • NetworkBannerSoon

    Inline connection-quality warnings.