Stream
Live streaming dashboard with real-time chat panel, viewer stats, and dark broadcast aesthetics.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| video | string | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4 | Video source URL. |
| backgroundColor | string | #0d0d14 | Background color (hex, rgb, or hsl). |
When to Use
Perfect for live streaming platforms, gaming dashboards, and broadcast tools that need a split-layout experience with real-time chat alongside video. Ideal when social engagement and live viewer interaction are core to the product.
Best Practices
Pair with WebSocket-driven chat data for real production use. Keep the video area at roughly 60% width for comfortable viewing. Use the Uilora-branded defaults for internal tools or swap in your own channel metadata.
Why This Component Matters
The dual-panel layout mirrors how top streaming platforms present live content — video and community side-by-side. This pattern reduces context switching and keeps viewers engaged longer, increasing session time and interaction rates.
FAQ
QCan I connect a real chat?
Yes. Replace the mock messages array with a WebSocket or polling feed and push new entries the same way the mock timer does — the UI will handle the animated scroll automatically.
QIs the viewer count live?
The default shows a static Uilora-branded count. Wire up your own analytics endpoint and update the state variable to reflect real-time numbers.
QIs it mobile responsive?
On small screens the chat panel stacks below the video, maintaining full usability. The scrubber thumbnail preview collapses gracefully on touch devices.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.