Component

Video Tile

A participant tile for video meeting grids — shows a live media stream or an avatar/initials fallback, with overlays for the participant name, mic state, speaking indicator, and optional reactions.

Basic with avatar fallback

When no mediaSlot is provided, the tile renders a centred circle with the participant's initials derived from their name.

Maya Goldberg

Alice Chen

Speaking + muted states

Pass speaking to add an emerald ring indicating active audio. Set micState="muted" to show the mic-off icon in the name chip.

Bob Kim

Carol West

Left: speaking (emerald ring). Right: mic muted (red icon in name chip).

Pinned

Pass pinned to highlight a tile with a primary ring. The optional reaction prop places a badge in the top-right corner.

Dave Rivera

Pinned tile (primary ring) with an optional reaction badge.

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { VideoTile } from '@refraction-ui/react'

export function MeetingGrid() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <VideoTile
        name="Maya Goldberg"
        speaking={true}
        micState="on"
      />
      <VideoTile
        name="Bob Kim"
        micState="muted"
        mediaSlot={<video autoPlay muted ref={videoRef} />}
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
`name`	`string`	--	Participant display name — shown in the name chip and used for the avatar initials fallback.
`micState`	`'on' \| 'muted'`	`'on'`	Current microphone state. When muted, a mic-off icon appears in the name chip.
`speaking`	`boolean`	`false`	Whether the participant is actively speaking. Adds an emerald ring around the tile.
`pinned`	`boolean`	`false`	Whether the tile is pinned in the meeting grid. Adds a primary ring.
`avatarUrl`	`string`	--	URL of an avatar image shown in the fallback circle when no mediaSlot is provided.
`mediaSlot`	`React.ReactNode`	--	A <video> element or any ReactNode to use as the tile media layer. When omitted the avatar/initials fallback is shown.
`reaction`	`React.ReactNode`	--	Optional emoji or badge rendered at the top-right of the tile.
`className`	`string`	--	Additional CSS classes applied to the tile container.