About this set
One short conversation about picking up two bikes from a repair shop, styled two ways so you can compare the two tail styles messaging apps use. Grouped corners, curved tail on the last bubble keeps consecutive messages from one sender together: the corners facing the sender stay tight between bubbles, the first bubble keeps its round top corner and only the last bubble of each group gets the curved tail. That tail is a radial-gradient cut-out on a pseudo-element, so it needs no knowledge of the background behind the chat and works on any colour or image. Notched tail on the first bubble, time inside puts a small clipped triangle on the first bubble of each group, squares off that corner and sets the time inside every bubble as a time element. Sent and received bubbles differ in colour and side, and each sender group starts with a visually hidden name such as Ines: or You:, so the conversation still reads correctly to people who cannot see which side a bubble is on. This set is about the bubbles themselves; for whole messenger layouts see the chat UI pack.
What’s included
- Grouped corners that stay tight on the sender's side
- Curved tail drawn with a radial-gradient, independent of the background
- Notched first-bubble tail with the time inside the bubble
- Visually hidden sender names at the start of each group
- No JavaScript
Accessibility
Each conversation is a section with an aria-label such as Conversation with Ines Duarte. Every sender group starts with a visually hidden name, times are time elements with a datetime attribute, and the delivered receipt is written as text. Text in both sent and received bubbles reaches at least 4.5:1, and the tails are empty pseudo-elements that are not announced.
Customise it
Set --cs-in, --cs-out, --cs-out-ink and --cs-r on .cs, and the .cs-notch block for the second style. In Tailwind edit the --color-cs-* theme colours and the rounded-[…] utilities on each bubble; Bootstrap uses the same --cs-* variables on a .card.
