Components•Message dock

Message dock

A compact character dock that expands into a focused message composer. The selected avatar anchors in place while the input, actions, and supporting characters animate around it without losing the collapsed dock footprint.

Dependencies

Motionclsx

Copy below cli

npx shadcn add @bjork-ui/message-dock

How to use

import { MessageDock } from "@/components/isaiahbjork/hud/message-dock";export function Demo() {  return (    <MessageDock      characters={characters}      onMessageSend={(message, character) => console.log(message, character)}      expandedWidth={500}      theme="light"      closeOnSend    />  );}