shadcn.io is not affiliated with official shadcn/ui
Video Call Preview Chat Block for Ark UI
A team thread with a call card that opens a pre-join band with a drawn self view and Microphone and Camera toggles, then counts up in the card to a 15 second cap and posts Call ended when you leave.
Installation
Overview
Let people check how they will look before they join a call, with this video call preview chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Lobbyroom, a team chat with calls: the top bar names Ines Maldonado, and the log holds an earlier ended call and a card for "Design sync" with its three participants and an outline Join button. Join swaps the composer for a pre-join band: a drawn self view, Toggle buttons for Microphone and Camera (on by default) and "Join now", the one colored Shine Button; Cancel puts the composer back. Joining turns the card into "In call" with a clock that counts up to 00:15 and stops with "Timer stopped in this demo", a visible Pause and Leave, which posts "Call ended" with the length. The frame is ruled by Guides. It's the starting point for a chat with calls.
FAQ
What stays in the page, and how do I make it real?
Everything, and the camera and microphone are never asked for. The self view is three drawn shapes, the participants are typed, and the clock is a timer that stops after fifteen seconds. To wire it for real, request the devices only when the visitor presses Join now, show the stream in the self view, and join the room through your video provider.
What is in the pre-join band?
A drawn picture of you, a Microphone and a Camera toggle (both on, each with a different glyph when off), Cancel and Join now. While it is open the composer is out of the way and Join now is the only colored control; Cancel returns focus to the card's Join button.
How does the call clock work?
One interval ticks once a second while you are in the call and the clock is neither paused nor capped, so it runs at most fifteen seconds. Pause timer and Resume timer are real buttons, and at 00:15 the card says the timer stopped in this demo. Leave posts a system line with the length.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description tells a screen reader; Enter during text composition (an IME) is left alone. The field grows with its content up to a limit, Send stays quiet while there is nothing to send and says so if pressed, and focus returns to the field after sending.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden sender and time. The participants are a named list with every name in text, the toggles are named for what they control, and every change of the call is announced in the one status line.