LiveKit LogoDocs
Real-timeEgress/IngressCloudReference

React Components

On this page

About LiveKit Components🤩 React Components handle all state for you🛠️ Carefully crafted set of components🚀 Beautiful and sane defaults📈 Room to grow: create your own componentsExamples

About LiveKit Components

Build your LiveKit WebRTC experience without worrying about updating or maintaining room, participant, or track state. LiveKit Components give you a declarative way to build your real-time LiveKit audio/video frontend with React.

Every use case is different and apps in the real world are individual and unique. We don't pretend to have the perfect solution that fits all use cases. Instead, we've taken an approach where we give you reasonable defaults, without taking away full control over each component if you want it.

🤩 React Components handle all state for you

You don't have to worry about participant or room events to update the state of your application. All components handle state management for you, and by using React contexts, you don't have to route properties through your component tree.

🛠️ Carefully crafted set of components

We offer all the necessary building blocks to build a live video or audio app in no time.

🚀 Beautiful and sane defaults

We put a lot of effort into creating components that work and look great right out of the gate. Get started quickly by using the defaults of your components or overwrite them by simply adding children.

//1️⃣ Use the components defaults to render a video conference app
<LiveKitRoom
token="my-token"
serverUrl="wss://my-livekit-server"
>
<VideoConference />
</LiveKitRoom>
// 2️⃣ or overwrite the defaults with your custom component tree.
<LiveKitRoom
token="my-token"
serverUrl="wss://my-livekit-server"
>
<MyVideoConference />
</LiveKitRoom>
function MyVideoConference() {
const tracks = useTracks(
[
{ source: Track.Source.Camera, withPlaceholder: true },
{ source: Track.Source.ScreenShare, withPlaceholder: false },
],
);
return (
<GridLayout tracks={tracks}>
<ParticipantTile />
</GridLayout>
);
}

📈 Room to grow: create your own components

The component we offer does not fit your requirements? We have the solution for you! Each component comes with its own React hook that allows you to create your own component with minimal boilerplate. Of course, you can also combine your own component with our pre-built components. It's common to start with our components to quickly sketch out a concept, and then replace some of them with your own components to build something we could never have imagined.

Examples

While the LiveKit Components docs provide a robust foundation for creating real-time audio/video experiences, sometimes the best way to understand their potential is through hands-on examples. Whether you're a beginner looking to get started or an experienced developer seeking advanced implementations, our curated list of examples will guide you through various use cases and applications. Explore, customize, and let these examples inspire your next LiveKit project.

There are some basic examples of how to use and customize LiveKit components in the nextjs example folder.

We also have a full-featured video conferencing application built with LiveKit Components here that powers https://meet.livekit.io.

For a growing collection of real-world examples, check out the livekit-examples organization on GitHub. Examples range from spatial audio, to AI-enhanced video conferencing, to how to build a live streaming app.

LiveKit logo

Product

SFU

SDKs

Performance

Deployment

GitHub Logo