Chat UI – 8 Free CSS, Bootstrap & Tailwind Sets
Chat UI is a pack of eight sets of chat interfaces, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using .card, .list-group, .badge, .btn, .btn-close and .form-control where they fit, and Tailwind CSS 4. The sets cover message bubbles and threads, a two-pane messenger that collapses to one pane on phones, a floating support chat widget, an AI assistant chat with streaming replies and a code block, composer inputs with emoji and attachments, a group chat with reactions and replies, a dark set and a modern CSS set built on column-reverse scrolling, field-sizing, :has(), @starting-style and container queries. Sending a message in the demos only adds it to the page; there are no API calls.
A good chat interface tells everyone who said what and when, not only the people who can see the colours. Each message needs a sender and a time that a screen reader can reach, even when the design hides your own name, and the message list should be a live log that announces new messages without re-reading the whole history. Delivery states such as Read or Not delivered are words, not just a tick or a red tint. The composer should grow with the text, send on Enter, add a line on Shift+Enter and leave Send disabled while there is nothing to send. Panels and pickers return focus to the button that opened them when Esc is pressed, and anything that animates, from typing dots to streamed replies, settles down for people who ask for reduced motion.
