Call

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add call-incoming

Usage#

Anatomy#

import {
  CallIncoming,
  CallIncomingAccept,
  CallIncomingActions,
  CallIncomingAvatar,
  CallIncomingContent,
  CallIncomingDecline,
  CallIncomingDescription,
  CallIncomingTitle,
} from "@/components/ui/call-incoming"

<CallIncoming>
  <CallIncomingAvatar />
  <CallIncomingContent>
    <CallIncomingTitle />
    <CallIncomingDescription />
  </CallIncomingContent>
  <CallIncomingActions>
    <CallIncomingDecline />
    <CallIncomingAccept />
  </CallIncomingActions>
</CallIncoming>

Audio and missed#

Without video the accept button draws a handset. A missed call keeps the card but sets ringing={false}: the halo and the ring stop, and a single call-back button is enough.

API reference#

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add call-lobby

Usage#

Anatomy#

import {
  CallLobby,
  CallLobbyActions,
  CallLobbyContent,
  CallLobbyDescription,
  CallLobbyDevices,
  CallLobbyHeader,
  CallLobbyLevel,
  CallLobbyPreview,
  CallLobbyPreviewControls,
  CallLobbyTitle,
} from "@/components/ui/call-lobby"

<CallLobby>
  <CallLobbyPreview>
    <CallTile />
    <CallLobbyPreviewControls />
  </CallLobbyPreview>
  <CallLobbyContent>
    <CallLobbyHeader>
      <CallLobbyTitle />
      <CallLobbyDescription />
    </CallLobbyHeader>
    <CallLobbyDevices>
      <CallLobbyLevel />
    </CallLobbyDevices>
    <CallLobbyActions />
  </CallLobbyContent>
</CallLobby>

Level#

CallLobbyLevel lights segments in ink as the microphone picks up sound, so a person can see it working before anyone hears them. It reads a level from 0 to 1 and eases each segment on and off.

API reference#

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add call-stage

Usage#

Anatomy#

import {
  CallStage,
  CallStageReactions,
  CallTile,
  CallTileActions,
  CallTileAvatar,
  CallTileHand,
  CallTileLevel,
  CallTileMedia,
  CallTileMuted,
  CallTileName,
  CallTilePin,
  CallTileSignal,
} from "@/components/ui/call-stage"

<CallStage>
  <CallTile>
    <CallTileMedia />
    <CallTileAvatar />
    <CallTileHand />
    <CallTileActions>
      <CallTilePin />
    </CallTileActions>
    <CallTileName>
      <CallTileMuted />
      <CallTileLevel />
      <CallTileSignal />
    </CallTileName>
  </CallTile>
  <CallStageReactions />
</CallStage>

Layouts#

gallery gives every tile the same size and centres a short last row, so three people read as two and one, not as a ragged grid. spotlight hands the width to one tile and lines the others up below it. Pin a tile, follow the active speaker or show a screen share by pointing spotlight at a tile's value. Every tile keeps its element through the change and travels from where it was to where it lands, on the settle curve a container uses, so the eye can follow the one that grew.

GallerySpotlight

Liam Dixon

Maya Chen

Speaking

Marcus Reyes

Evelyn Molina

Tariq Okafor

Show code

X-ray

Pin several#

Pass an array to spotlight and the pinned tiles share the top of the stage as their own grid, in the order they were pinned: two side by side, three in a row, four as two by two. Everyone else waits in the strip below, and pinning or unpinning moves each tile from where it was instead of rebuilding the grid.

1 pinned2 pinned3 pinned4 pinned

Liam Dixon

Maya Chen

Marcus Reyes

Evelyn Molina

Tariq Okafor

Ana Romero

Show code

X-ray

Tile states#

Each state is a part, so a tile only shows what is true. speaking rings the tile in green and runs the level bars; a muted microphone takes the bars' place. With the camera off, CallTileAvatar takes the middle and its halo grows while the person talks. A raised hand carries its place in the queue, and a screen share (kind="screen") is fitted on black instead of cropped.

Liam Dixon

Speaking

1Hand raised

Maya Chen

MR

Marcus Reyes

Speaking

Evelyn Molina

Ana Romero is presenting

Show code

X-ray

Connection#

CallTileSignal has three levels. Most calls only render it when the line is fair or poor, so a healthy tile stays quiet; the colour is the only hue in the chip, and the glyph is named for screen readers.

Reactions#

CallStageReactions floats each reaction up from the bottom of the stage with the sender's name, then hands it back through onReactionEnd. It is the one playful moment of the call, so it stays short and never covers a face for long. Under reduced motion the reaction fades in place.

Liam Dixon

Sofia Laine

Show code

X-ray

Minimized#

A call that keeps going while the person works elsewhere is a CallTile inside a Floating Window, with a small CallControls under it. Drag it by its bar, resize it from the corner, fold it to its title.

Design review · 12:48

Liam Dixon

Speaking

Show code

X-ray

API reference#

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add call-controls

Usage#

Anatomy#

import {
  CallControl,
  CallControls,
  CallControlsGroup,
  CallControlsSeparator,
  CallDeviceMenu,
  CallLeave,
  CallReactionPicker,
  CallToggle,
} from "@/components/ui/call-controls"

<CallControls>
  <CallControlsGroup>
    <CallToggle />
    <CallDeviceMenu />
  </CallControlsGroup>
  <CallControlsSeparator />
  <CallReactionPicker />
  <CallControl />
  <CallLeave />
</CallControls>

Toggles#

Four presets, each shown live and off. Microphone and camera are device toggles: off is the state to notice, so the control turns into an inverted ink chip and the glyph takes its slash. Screen and hand are feature toggles: on is the exception, so a faint chip sits under a filled glyph. No colour is spent on either; red is kept for leaving.

Variants#

floating is the raised capsule that sits over a stage. plain drops it, for a bar inside a window, a lobby or a page.

Sizes#

md for the call itself; sm for a minimized call or a lobby preview, where 16px glyphs sit better. Both keep a 40px hit area.

Leave#

The handset turned down, on a soft red, wider than its neighbours so it is never the control hit by mistake. Give it a visible label when leaving means more than hanging up, like ending the call for everyone.

API reference#

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add call-participants

Usage#

Anatomy#

import {
  CallParticipant,
  CallParticipantAction,
  CallParticipantActions,
  CallParticipantAvatar,
  CallParticipantContent,
  CallParticipantMeta,
  CallParticipantName,
  CallParticipants,
  CallParticipantStatus,
} from "@/components/ui/call-participants"

<CallParticipants>
  <CallParticipant>
    <CallParticipantAvatar />
    <CallParticipantContent>
      <CallParticipantName />
      <CallParticipantMeta />
    </CallParticipantContent>
    <CallParticipantStatus />
    <CallParticipantActions>
      <CallParticipantAction />
    </CallParticipantActions>
  </CallParticipant>
</CallParticipants>

States#

A quiet row shows nothing at its end. speaking rings the avatar and runs three green bars, the only hue in the list; muted puts the slashed microphone in their place, and a raised hand sits before it in ink.

API reference#

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add call-invite

Usage#

Anatomy#

import {
  CallInvite,
  CallInviteForm,
  CallInviteLink,
  CallInvitePeople,
  CallInvitePerson,
  CallInvitePersonAction,
  CallInvitePersonContent,
  CallInvitePersonDetail,
  CallInvitePersonName,
} from "@/components/ui/call-invite"

<CallInvite>
  <CallInviteLink />
  <CallInviteForm />
  <CallInvitePeople>
    <CallInvitePerson>
      <CallInvitePersonContent>
        <CallInvitePersonName />
        <CallInvitePersonDetail />
      </CallInvitePersonContent>
      <CallInvitePersonAction />
    </CallInvitePerson>
  </CallInvitePeople>
</CallInvite>

Link#

The field selects the whole link on focus. The copy button's glyph cross-fades to a check for a couple of seconds and back; the two mean different things, so they swap rather than morph.

Invited#

Before and after. invited steps the button back from outline to ghost and keeps it in place, so the row does not jump and the person can see who already has the invite.

API reference#