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

<admonition type="note">

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.

</admonition>

## Using pre-built components

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

```tsx
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:

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

Check out the [theming guide](/video/docs/react/ui-components/video-theme/) 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](/video/docs/react/guides/call-and-participant-state/).

Example using `useParticipants()` to render participants:

```tsx
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>
      ))}
    </>
  );
};
```

<admonition type="tip">
The UI Cookbook section contains tutorials covering common customization examples.
</admonition>


---

This page was last updated at 2026-06-16T09:11:35.065Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/ui-components/overview/](https://getstream.io/video/docs/react/ui-components/overview/).