Message Dock

Interactive messaging interface with character avatars and smooth expanding animations. A free open source React component for Next.js featuring TypeScript integration and Framer Motion physics.

Framer Motion

Loading component...

'use client';import { cn } from "@/lib/utils";import { motion, useReducedMotion, AnimatePresence } from "framer-motion";import { useState, useRef, useEffect } from "react";export interface Character {  id?: string | number;  emoji: string;  name: string;  online: boolean;  backgroundColor?: string;  gradientFrom?: string;  gradientTo?: string;  gradientColors?: string;  avatar?: string;}export interface MessageDockProps {  characters?: Character[];  onMessageSend?: (message: string, character: Character, characterIndex: number) => void;  onCharacterSelect?: (character: Character, characterIndex: number) => void;  onDockToggle?: (isExpanded: boolean) => void;  className?: string;  expandedWidth?: number;  position?: "bottom" | "top";  showSparkleButton?: boolean;  showMenuButton?: boolean;  enableAnimations?: boolean;  animationDuration?: number;  placeholder?: (characterName: string) => string;  theme?: "light" | "dark" | "auto";  autoFocus?: boolean;  closeOnClickOutside?: boolean;  closeOnEscape?: boolean;  closeOnSend?: boolean;}const defaultCharacters: Character[] = [  { emoji: "✨", name: "Sparkle", online: false },  {    emoji: "🧙‍♂️",    name: "Wizard",    online: true,    backgroundColor: "bg-emerald-200 dark:bg-emerald-300",    gradientFrom: "from-emerald-200",    gradientTo: "to-emerald-50",    gradientColors: "#a7f3d0, #ecfdf5",  },  {    emoji: "🦄",    name: "Unicorn",    online: true,    backgroundColor: "bg-violet-200 dark:bg-violet-300",    gradientFrom: "from-violet-200",    gradientTo: "to-violet-50",    gradientColors: "#c4b5fd, #f5f3ff",  },  {    emoji: "🐵",    name: "Monkey",    online: true,    backgroundColor: "bg-amber-200 dark:bg-amber-300",    gradientFrom: "from-amber-200",    gradientTo: "to-amber-50",    gradientColors: "#fde68a, #fffbeb",  },  {    emoji: "🤖",    name: "Robot",    online: false,    backgroundColor: "bg-rose-200 dark:bg-rose-300",    gradientFrom: "from-rose-200",    gradientTo: "to-rose-50",    gradientColors: "#fecaca, #fef2f2",  },];const getGradientColors = (character: Character) => {  return character.gradientColors || "#86efac, #dcfce7";};export function MessageDock({  characters = defaultCharacters,  onMessageSend,  onCharacterSelect,  onDockToggle,  className,  expandedWidth = 448,  position = "bottom",  showSparkleButton = true,  showMenuButton = true,  enableAnimations = true,  animationDuration = 1,  placeholder = (name: string) => `Message ${name}...`,  theme = "light",  autoFocus = true,  closeOnClickOutside = true,  closeOnEscape = true,  closeOnSend = true,}: MessageDockProps) {  const shouldReduceMotion = useReducedMotion();  const [expandedCharacter, setExpandedCharacter] = useState<number | null>(    null  );  const [messageInput, setMessageInput] = useState("");  const dockRef = useRef<HTMLDivElement>(null);  const [collapsedWidth, setCollapsedWidth] = useState<number>(266);  const [hasInitialized, setHasInitialized] = useState(false);  useEffect(() => {    if (dockRef.current && !hasInitialized) {      const width = dockRef.current.offsetWidth;      if (width > 0) {        setCollapsedWidth(width);        setHasInitialized(true);      }    }  }, [hasInitialized]);  useEffect(() => {    if (!closeOnClickOutside) return;        const handleClickOutside = (event: MouseEvent) => {      if (dockRef.current && !dockRef.current.contains(event.target as Node)) {        setExpandedCharacter(null);        setMessageInput("");        onDockToggle?.(false);      }    };    document.addEventListener("mousedown", handleClickOutside);    return () => {      document.removeEventListener("mousedown", handleClickOutside);    };  }, [closeOnClickOutside, onDockToggle]);  const containerVariants = {    hidden: {      opacity: 0,      y: 100,      scale: 0.8,    },    visible: {      opacity: 1,      y: 0,      scale: 1,      transition: {        type: "spring" as const,        stiffness: 300,        damping: 30,        mass: 0.8,        staggerChildren: 0.1,        delayChildren: 0.2,      },    },  };  const hoverAnimation = shouldReduceMotion    ? { scale: 1.02 }    : {        scale: 1.05,        y: -8,        transition: {          type: "spring",          stiffness: 400,          damping: 25,        },      };  const handleCharacterClick = (index: number) => {    const character = characters[index];        if (expandedCharacter === index) {      setExpandedCharacter(null);      setMessageInput("");      onDockToggle?.(false);    } else {      setExpandedCharacter(index);      onCharacterSelect?.(character, index);      onDockToggle?.(true);    }  };  const handleSendMessage = () => {    if (messageInput.trim() && expandedCharacter !== null) {      const character = characters[expandedCharacter];            onMessageSend?.(messageInput, character, expandedCharacter);            setMessageInput("");            if (closeOnSend) {        setExpandedCharacter(null);        onDockToggle?.(false);      }    }  };  const selectedCharacter =    expandedCharacter !== null ? characters[expandedCharacter] : null;  const isExpanded = expandedCharacter !== null;  const defaultPositionClasses = position === "top"     ? "fixed top-6 left-1/2 -translate-x-1/2 z-50"    : "fixed bottom-6 left-1/2 -translate-x-1/2 z-50";  return (    <motion.div      ref={dockRef}      className={cn(        // Only apply default positioning if not overridden by className        !className?.includes('relative') && !className?.includes('absolute') ? defaultPositionClasses : '',        className      )}      initial={enableAnimations ? "hidden" : "visible"}      animate="visible"      variants={enableAnimations ? containerVariants : {}}    >      <motion.div        className="rounded-full px-4 py-2 shadow-2xl border border-border bg-background/95 backdrop-blur-md"        animate={{          width: isExpanded ? expandedWidth : collapsedWidth,          background: isExpanded && selectedCharacter            ? `linear-gradient(to right, ${getGradientColors(selectedCharacter)})`            : "hsl(var(--background))",        }}        transition={enableAnimations ? {           type: "spring",           stiffness: isExpanded ? 300 : 500,           damping: isExpanded ? 30 : 35,           mass: isExpanded ? 0.8 : 0.6,          background: {            duration: 0.2 * animationDuration,            ease: "easeInOut"          }        } : { duration: 0 }}      >        <div className="flex items-center gap-2 relative">          {showSparkleButton && (            <motion.div            className="flex items-center justify-center"            animate={{              opacity: isExpanded ? 0 : 1,              x: isExpanded ? -20 : 0,              scale: isExpanded ? 0.8 : 1,            }}            transition={{              type: "spring",              stiffness: 400,              damping: 30,              delay: isExpanded ? 0 : 0,            }}          >            <motion.button              className="w-12 h-12 flex items-center justify-center cursor-pointer"              whileHover={                !isExpanded                  ? {                      scale: 1.02,                      y: -2,                      transition: {                        type: "spring",                        stiffness: 400,                        damping: 25,                      },                    }                  : undefined              }              whileTap={{ scale: 0.95 }}              aria-label="Sparkle"            >              <span className="text-2xl">✨</span>            </motion.button>          </motion.div>          )}          <motion.div            className="w-px h-6 bg-gray-300 mr-2 -ml-2"            animate={{              opacity: isExpanded ? 0 : 1,              scaleY: isExpanded ? 0 : 1,            }}            transition={{              type: "spring",              stiffness: 300,              damping: 30,              delay: isExpanded ? 0 : 0.3,            }}          />          {characters.slice(1, -1).map((character, index) => {            const actualIndex = index + 1;            const isSelected = expandedCharacter === actualIndex;            return (              <motion.div                key={character.name}                className={cn(                  "relative",                  isSelected && isExpanded && "absolute left-1 top-1 z-20"                )}                style={{                  width: isSelected && isExpanded ? 0 : "auto",                  minWidth: isSelected && isExpanded ? 0 : "auto",                  overflow: "visible",                }}                animate={{                  opacity: isExpanded && !isSelected ? 0 : 1,                  y: isExpanded && !isSelected ? 60 : 0,                  scale: isExpanded && !isSelected ? 0.8 : 1,                  x: isSelected && isExpanded ? 0 : 0,                }}                transition={{                  type: "spring",                  stiffness: 400,                  damping: 30,                  delay:                    isExpanded && !isSelected                      ? index * 0.05                      : isExpanded                      ? 0.1                      : 0,                }}              >                <motion.button                  className={cn(                    "relative w-10 h-10 rounded-full flex items-center justify-center text-xl cursor-pointer",                    isSelected && isExpanded                      ? "bg-white/90"                      : character.backgroundColor                  )}                  onClick={() => handleCharacterClick(actualIndex)}                  whileHover={!isExpanded ? hoverAnimation : { scale: 1.05 }}                  whileTap={{ scale: 0.95 }}                  aria-label={`Message ${character.name}`}                >                  <span className="text-2xl">{character.emoji}</span>                  {character.online && (                    <motion.div                      className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"                      initial={{ scale: 0 }}                      animate={{ scale: isExpanded && !isSelected ? 0 : 1 }}                      transition={{                        delay: isExpanded                          ? isSelected                            ? 0.3                            : 0                          : (index + 1) * 0.1 + 0.5,                        type: "spring",                        stiffness: 500,                        damping: 30,                      }}                    />                  )}                </motion.button>              </motion.div>            );          })}          <AnimatePresence>            {isExpanded && (              <motion.input                type="text"                value={messageInput}                onChange={(e) => setMessageInput(e.target.value)}                onKeyDown={(e) => {                  if (e.key === "Enter") {                    handleSendMessage();                  }                  if (e.key === "Escape" && closeOnEscape) {                    setExpandedCharacter(null);                    setMessageInput("");                    onDockToggle?.(false);                  }                }}                placeholder={placeholder(selectedCharacter?.name || "")}                className="w-[300px] absolute left-14 right-0 bg-transparent border-none outline-none text-sm font-medium z-50 text-foreground placeholder-muted-foreground"                autoFocus={autoFocus}                initial={{ opacity: 0, x: 20 }}                animate={{                   opacity: 1,                   x: 0,                  transition: {                    delay: 0.2,                    type: "spring",                    stiffness: 400,                    damping: 30,                  }                }}                exit={{                   opacity: 0,                  transition: {                    duration: 0.1,                    ease: "easeOut"                  }                }}              />            )}          </AnimatePresence>          <motion.div            className="w-px h-6 bg-gray-300 ml-2 -mr-2"            animate={{              opacity: isExpanded ? 0 : 1,              scaleY: isExpanded ? 0 : 1,            }}            transition={{              type: "spring",              stiffness: 300,              damping: 30,              delay: isExpanded ? 0 : 0,            }}          />          {showMenuButton && (            <motion.div              className={cn(                "flex items-center justify-center z-20",                isExpanded && "absolute right-0"              )}              transition={{ type: "spring", stiffness: 400, damping: 30 }}            >              <AnimatePresence mode="wait">                {!isExpanded ? (                <motion.button                  key="menu"                  className="w-12 h-12 flex items-center justify-center cursor-pointer"                  whileHover={{                    scale: 1.02,                    y: -2,                    transition: {                      type: "spring",                      stiffness: 400,                      damping: 25,                    },                  }}                  whileTap={{ scale: 0.95 }}                  aria-label="Menu"                  initial={{ opacity: 0, rotate: -90 }}                  animate={{ opacity: 1, rotate: 0 }}                  exit={{ opacity: 0, rotate: 90 }}                  transition={{ type: "spring", stiffness: 400, damping: 30 }}                >                  <svg                    width="20"                    height="20"                    viewBox="0 0 24 24"                    fill="none"                    stroke="currentColor"                    strokeWidth="2"                    className="text-muted-foreground"                  >                    <line x1="3" y1="6" x2="21" y2="6" />                    <line x1="3" y1="12" x2="21" y2="12" />                    <line x1="3" y1="18" x2="21" y2="18" />                  </svg>                </motion.button>                ) : (                <motion.button                  key="send"                  onClick={handleSendMessage}                  className="w-10 h-10 flex items-center justify-center rounded-full bg-background/90 hover:bg-background transition-colors disabled:opacity-50 cursor-pointer relative z-30 border border-border/50"                  whileHover={{ scale: 1.1 }}                  whileTap={{ scale: 0.9 }}                  disabled={!messageInput.trim()}                  initial={{ opacity: 0, scale: 0, rotate: -90 }}                  animate={{                     opacity: 1,                     scale: 1,                     rotate: 0,                    transition: {                      delay: 0.25,                      type: "spring",                      stiffness: 400,                      damping: 30,                    }                  }}                  exit={{                     opacity: 0,                     scale: 0,                     rotate: 90,                    transition: {                      duration: 0.1,                      ease: "easeIn"                    }                  }}                >                  <svg                    width="16"                    height="16"                    viewBox="0 0 24 24"                    fill="none"                    stroke="currentColor"                    strokeWidth="2"                    className="text-muted-foreground"                  >                    <path d="m22 2-7 20-4-9-9-4z" />                    <path d="M22 2 11 13" />                  </svg>                </motion.button>              )}            </AnimatePresence>          </motion.div>          )}        </div>      </motion.div>    </motion.div>  );}

Installation

npx shadcn@latest add https://www.shadcn.io/registry/message-dock.json

npx shadcn@latest add https://www.shadcn.io/registry/message-dock.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/message-dock.json

bunx shadcn@latest add https://www.shadcn.io/registry/message-dock.json

Features

Free open source React component built for Next.js applications with interactive messaging functionality
Character-based messaging system featuring customizable avatars, emojis, and real-time status indicators
TypeScript-first development with comprehensive type definitions and IntelliSense support
Advanced Framer Motion animations with spring physics, stagger effects, and smooth expand/collapse transitions
Tailwind CSS integration for seamless styling, gradient backgrounds, and responsive design patterns
shadcn/ui compatibility following modern component architecture and design system conventions
Dynamic theme support with light, dark, and auto modes featuring customizable gradient color schemes
Complete keyboard navigation with Enter to send, Escape to close, and full accessibility compliance
Intelligent interaction patterns including click outside to close and configurable auto-focus behavior
Responsive adaptive design that works beautifully across all device sizes and orientations
Performance optimized with reduced motion support, hardware acceleration, and efficient rendering
Customizable configuration with extensive props for behavior, appearance, and animation control

Usage

import { MessageDock, type Character } from '@/components/ui/message-dock';

const characters: Character[] = [
  { emoji: "✨", name: "Sparkle", online: false },
  {
    emoji: "🧙‍♂️",
    name: "Wizard",
    online: true,
    backgroundColor: "bg-green-300",
    gradientColors: "#86efac, #dcfce7",
  },
  // ... more characters
];

<MessageDock
  characters={characters}
  onMessageSend={(message, character, index) => {
    console.log('Message:', message, 'to', character.name);
  }}
  onCharacterSelect={(character) => {
    console.log('Selected:', character.name);
  }}
  expandedWidth={500}
  placeholder={(name) => `Send a message to ${name}...`}
  theme="light"
/>

Props

MessageDock

Prop	Type	Default	Description
`characters`	`Character[]`	`defaultCharacters`	Array of character objects
`onMessageSend`	`(message, character, index) => void`	-	Callback when message is sent
`onCharacterSelect`	`(character, index) => void`	-	Callback when character is selected
`onDockToggle`	`(isExpanded) => void`	-	Callback when dock expands/collapses
`className`	`string`	-	Additional CSS classes
`expandedWidth`	`number`	`448`	Width when expanded (px)
`position`	`"bottom" \| "top"`	`"bottom"`	Dock position on screen
`showSparkleButton`	`boolean`	`true`	Show sparkle button on left
`showMenuButton`	`boolean`	`true`	Show menu/send button on right
`enableAnimations`	`boolean`	`true`	Enable/disable animations
`animationDuration`	`number`	`1`	Animation duration multiplier
`placeholder`	`(name) => string`	`"Message {name}..."`	Input placeholder function
`theme`	`"light" \| "dark" \| "auto"`	`"light"`	Color theme
`autoFocus`	`boolean`	`true`	Auto-focus input when expanded
`closeOnClickOutside`	`boolean`	`true`	Close dock when clicking outside
`closeOnEscape`	`boolean`	`true`	Close dock on Escape key
`closeOnSend`	`boolean`	`true`	Close dock after sending message

Character Interface

Property	Type	Description
`id`	`string \| number`	Optional unique identifier
`emoji`	`string`	Character emoji/icon
`name`	`string`	Character display name
`online`	`boolean`	Online status (shows green dot)
`backgroundColor`	`string`	Tailwind background class
`gradientColors`	`string`	CSS gradient colors for expanded state
`avatar`	`string`	Optional image URL (future feature)

Use Cases

This free open source React component is perfect for:

Next.js chat applications - Create engaging messaging interfaces with TypeScript safety and character selection
Customer support platforms - Build interactive help systems with animated character avatars using shadcn/ui patterns
Gaming interfaces - Design character communication systems with smooth animations and JavaScript interactions
Creative portfolios - Showcase interactive design work with unique messaging experiences using Tailwind CSS styling
SaaS applications - Implement memorable user interfaces with character-based navigation and open source flexibility
Educational platforms - Create engaging learning experiences with animated character guides and messaging
Social applications - Design innovative communication interfaces with gradient themes and responsive behavior

Technical Details

Advanced Animation System

The component features sophisticated Framer Motion integration:

Spring physics calculations: Natural feeling animations with configurable stiffness, damping, and mass properties
Stagger effect sequencing: Characters animate in precise timing sequences for visual appeal
Smooth gradient morphing: Dynamic background transitions with CSS-in-JS color interpolation
Reduced motion compliance: Automatic detection and respect for user accessibility preferences

Performance Optimizations

Hardware-accelerated transforms with GPU optimization for smooth 60fps animations
Efficient DOM measurements with optimized resize handling and minimal recalculations
TypeScript-optimized component structure with proper prop validation and type safety
Tailwind CSS classes for consistent theming without runtime style computation
Smart re-rendering with React refs and AnimatePresence for optimal performance

Interactive Features

Dynamic width calculations with automatic collapsed/expanded state management
Real-time status indicators with online/offline character state visualization
Keyboard event handling with comprehensive key binding support
Click outside detection with configurable behavior and proper cleanup

Accessibility

This open source component includes comprehensive accessibility features:

Complete ARIA implementation with proper labels, roles, and semantic markup for assistive technologies
Keyboard navigation support with tab order management, focus indicators, and custom key bindings
React-compatible accessibility when used in interactive Next.js applications
Reduced motion support that automatically adapts animations based on user preferences
High contrast compatibility with customizable theming and color scheme adaptation
Screen reader friendly with descriptive labels and accessible component architecture

Animation Features

Reduced Motion Support: Respects user's motion preferences
Spring Physics: Natural feeling animations using Framer Motion
Stagger Effects: Characters animate in sequence
Smooth Transitions: Seamless expand/collapse with gradient morphing
Performance Optimized: Uses hardware acceleration and efficient rendering

Reactmessage-dock

On this page