Realtime Avatar Stack

Installation

<BlockItem name="realtime-avatar-stack-nextjs" description="Renders a stack of avatars which are connected via Supabase Realtime" />

Folder structure

Usage

The RealtimeAvatarStack component renders stacked avatars which are connected to Supabase Realtime. It uses the Presence feature of Supabase Realtime. You can use this to show currently online users in a chatroom, game session or collaborative app.

import { RealtimeAvatarStack } from '@/components/realtime-avatar-stack'

export default function Page() {
  return (
    <Header className="flex items-center justify-between">
      <h1>Lumon Industries</h1>
      <RealtimeAvatarStack roomName="break_room" />
    </Header>
  )
}

Props

Further reading

• Realtime Presence
• Realtime authorization