Chat Application

A fully interactive, encapsulated chat interface. Features include search filtering, simulated typing/replies, dynamic unread badges, auto-scrolling, and a responsive mobile drawer sidebar.

Every preview is live — pick a contact, search the list, or send a message and watch the simulated reply come back. variant changes the shell only; the conversation state, search and typing simulation are identical across all three.

Chat application

PasscontactsData: for the contact list and currentUser for the sender identity.
variant"default": is the two-pane layout — contact list beside the thread, collapsing to a drawer on narrow screens.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Chat

npx shadcn@latest add @algorize-ui/chat

components/custom/blocks/Chat.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Chat needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Minimal

Setvariant"minimal": and the chat becomes two cards instead of one: the contact list on the left and the thread on the right, each a bordered card with a gap between them and nothing drawn around them — so it sits on a page as two panels rather than one big box.

Glass

Setvariant"glass": for translucent panels with backdrop blur — it needs a colourful backdrop behind it to read.
color"rose": tints the accents against that backdrop.

Liquid Glass

Setvariant"liquid-glass": for authentic liquid glass refraction using SVG displacement mapping, multi-layer specular highlights, and fluid reflections.
color"rose": tints the accents against that backdrop.

Features

Explore the Chat component's robust features, including message grouping, timestamping, and responsive layout structures.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`currentUser`	`CurrentUser`	Required	Object containing `avatar` (URL), `status` ("online" \| "offline"), and optional `name` for the logged-in user.
`contactsData`	`Contact[]`	Required	Array of objects containing contact info (`id`, `name`, `message`, `date`, `unread`, `status`). Can accept `avatar` URL or fallback `initials` and `color`.
`variant`	`"default" \| "minimal" \| "glass" \| "liquid-glass"`	`"default"`	The shell. `default` is one card with the list and the thread side by side; `minimal` is two separate cards — the list and the thread — with a gap between them and no outer box; `glass` is one translucent card over a photo; `liquid-glass` provides true SVG displacement liquid refraction.
`color`	`"indigo" \| "rose" \| "emerald" \| "zinc" \| string`	`"indigo"`	Applies global color themes to the send button, typing indicators, active contacts, and focus rings. Accepts preset theme names or valid custom hex codes (e.g. `"#00FF00"`).