Floating Chat
3D floating chat list with perspective transforms and hover effects. Features card-based chat previews with 3D rotation on hover.
Main Features of Floating Chat
How to Use Floating Chat in Next.js
Installation Guide for Floating Chat
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | Array<{ id: string | number; name: string; message: string; time: string; avatar?: string; color?: string; unread?: boolean }> | [] | Array of chat items to display. |
className | string | undefined | Additional CSS classes for custom styling. |
onItemClick | (item: ChatItem) => void | undefined | Callback function called when a chat item is clicked. |
maxWidth | string | "max-w-sm" | Maximum width of the chat list container. |