Dock Chat
Floating dock chat widget with customizable position, animated open/close transitions, and spring physics. Features morphing button icon and smooth chat panel animations.
Refresh preview
Share Component
Copy CLI command
Props
| Property | Type | Default | Description |
|---|---|---|---|
| position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-right' | Position of the dock button and chat panel. |
| buttonSize | number | 56 | Size of the floating button in pixels. |
| chatWidth | number | 320 | Width of the chat panel in pixels. |
| chatHeight | number | 384 | Height of the chat panel in pixels. |
| title | string | "Support Team" | Title displayed in the chat header. |
| subtitle | string | "How can we help you today?" | Subtitle displayed in the chat header. |
| buttonColor | string | "#4f46e5" | Color of the floating button (hex, rgb, or hsl). |
| className | string | undefined | Additional CSS classes for custom styling. |
| onOpenChange | (open: boolean) => void | undefined | Callback function called when chat opens or closes. |
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.