Navigation & Structure
Glass Chat
Glassmorphism chat interface with backdrop blur and background image. Features frosted glass message bubbles and smooth animations.
navigation-structurechatglassmorphismblurfrostedbackground
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundImage | string | "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop" | URL of the background image. |
messages | Array<{ id: number; text: string; sender: 'me' | 'other'; senderName?: string; time?: string }> | [] | Array of message objects to display. |
className | string | undefined | Additional CSS classes for custom styling. |
onSendMessage | (message: string) => void | undefined | Callback function called when a message is sent. |