Floating Chat

3D floating chat list with perspective transforms and hover effects. Features card-based chat previews with 3D rotation on hover.

Refresh preview

Copy CLI command

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.

Glassmorphism mega menu with noise textures and blur effects for a cosmic aesthetic.

Cyberpunk-inspired mega menu with glitch effects and neon aesthetics.

Neo-brutalist mega menu with bold typography and high contrast design.