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.