Overview

The React Video SDK provides built-in components ready for use, with styling and custom theming options via CSS. For custom use cases, create your own components to fully tailor the SDK to your needs.

Best Practices

Start with pre-built components; customize only when needed.
Import the SDK's CSS before your own styles for easier overrides.
Use StreamTheme to scope CSS variables to your video UI.
Don't override core components (ParticipantView, layouts) - use their customization props instead.

Please note that we suggest not to override a few, core components as those contain complex, low-level logic related to performance, the list of these components can be found in the UI Components/Core section.

Using pre-built components

Create a fully functioning video calling application with just a few lines of code:

import "@stream-io/video-react-sdk/dist/css/styles.css";
import {
  CallControls,
  StreamCall,
  StreamTheme,
  StreamVideo,
  SpeakerLayout,
} from "@stream-io/video-react-sdk";

const MyApp = () => {
  // Assuming you have the 'client' and 'call' instance created
  return (
    <StreamVideo client={client}>
      <StreamTheme>
        <StreamCall call={call}>
          <SpeakerLayout />
          <CallControls />
        </StreamCall>
      </StreamTheme>
    </StreamVideo>
  );
};

Theming with CSS

Customize styling by overriding CSS variables:

.str-video {
  // The primary color that is used
  --str-video__primary-color: green;
}

Check out the theming guide for more details.

Custom components

Create custom components from scratch or use built-in components as building blocks. Access state variables via hooks described in Call & Participant State.

Example using useParticipants() to render participants:

import { useCallStateHooks } from "@stream-io/video-react-sdk";

const MyParticipantList = () => {
  const { useParticipants } = useCallStateHooks();
  const participants = useParticipants();
  return (
    <>
      <h2>Participants</h2>
      {participants.map((participant) => (
        <div key={participant.sessionId}>
          <img
            src={participant.image}
            alt={`Profile picture of ${participant.name}.`}
          />
          <span>{participant.name}</span>
        </div>
      ))}
    </>
  );
};

The UI Cookbook section contains tutorials covering common customization examples.

Download user feedback

Theme