Audio Chat Room

A voice chat pill that morphs into a card showing everyone in the room.

Interaction Type

Click the pill to open the room. The avatars glide out into a grid, the names fade in and anyone speaking gets a live level badge. Press Join now and your avatar pops into the grid, while the button turns into a mic toggle and a Leave button. Unmute to show your own level badge. Close it with the X button or Escape. Honors prefers-reduced-motion: the layout snaps and content cross-fades, and the level bars stop moving.

Installation

npx shadcn@latest add ikislay/pixel-ui/audio-chat-room

How to use

import { AudioChatRoom } from "@/components/ui/audio-chat-room"


const people = [
  { id: "1", name: "Ana", avatar: "/ana.jpg", speaking: true },
  { id: "2", name: "Sam" },
]


export function Demo() {
  return <AudioChatRoom
      participants={people}
      onJoin={() => {}}
      onLeave={() => {}}
      onMutedChange={(muted) => {}}
    />
}

Source Code

// Loading…

Props

Options you can pass to customize this component.

Prop
Type
Description
participants*
{ id: string; name: string; avatar?: string; speaking?: boolean }[]

Who is in the room. The pill stacks the first 4 avatars and counts the rest. Without an avatar, initials show instead.

title
string

The heading of the open card.

joinLabel
string

Text of the join button.

helperText
string

Muted line under the join button, before you join.

you
{ id: string; name: string; avatar?: string }

The avatar added to the grid when you join.

defaultMuted
boolean

Whether your mic starts muted on join. Leaving resets it.

mutedText
string

The line under the controls while you are muted.

liveText
string

The line under the controls while your mic is on.

onJoin
() => void

Runs when the join button is pressed.

onLeave
() => void

Runs when the Leave button is pressed.

onMutedChange
(muted: boolean) => void

Runs when the mic toggle is pressed.

expanded
boolean

Controls the open state. Pair it with onExpandedChange.

defaultExpanded
boolean

Starts the room open when the state is not controlled.

onExpandedChange
(expanded: boolean) => void

Runs when the room opens or closes.

Keep in mind

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

Credits

  • •Inspired by morphin.dev

Contact

Found a bug or issue? Feel free to drop a DM.

License & Usage

  • •MIT with the Commons Clause and an attribution requirement. Free to use, modify and ship in personal and commercial projects, closed source included. You own the code once it is in your project.
  • •Credit is required. Any project shipping a Pixel UI component must credit Pixel UI with a visible link back to pixelui.dev, in a footer, an about page, a credits screen or a README.
  • •Don't strip the credit or the copyright notice from the source you copied.
  • •Don't sell, sublicense or redistribute the components themselves, on their own, bundled into a template, kit, theme or paid course, or ported to another framework.
  • •Don't republish them. No mirrors, no re-uploads, no listing them as your own work.
  • •Don't repackage the registry as a competing component library.
  • •Don't claim authorship of a component or of Pixel UI itself.
  • •The LICENSE file in the repository is the full text and governs. Ask first if your use doesn't fit these rules.
Audio Chat Room