shadcn.io is not affiliated with official shadcn/ui
Dating Messages Chat Block for Vue
A new match's thread in a narrow window: three profile prompts above the composer that write themselves into the field, a profile popover with shared interests, and report and block controls.
Installation
Overview
Help two people get past the first message, with this dating messages chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Kindlefold, a dating app: the top bar names the match, Maren Holloway, and holds two Popovers, one with her profile and the interests you share, worked out from two typed lists with no compatibility score, and one for safety, where you can report the chat or block her. The log is quiet Message and Bubble rows with no avatars, and above the composer sit three of her profile prompts as cards: pressing one writes "Replying to your prompt" into the field so your first message has context, and the card is spent once you send. The composer's Shine Button, the only colored control, sends what you type, and a Typing Indicator Text shows before her typed reply. It's the starting point for a matches inbox, a first-message helper or any chat between people who have just met.
FAQ
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script in this file, three keyed on words from her prompts and then one fallback per message. Reporting and blocking only add a line to the log and change the status text; nobody is told and nothing is stored. To wire it for real, send post's text to your messaging service where the code says so, send report and block to your trust and safety service, and stop showing the composer for a blocked match.
Where do the shared interests come from?
From two typed lists in the file, yours and hers: the badges are the entries that appear in both, in your order. There is no compatibility percentage on purpose, because a number invents precision that two short lists do not have. Replace the lists with each profile's real interests and the badges follow.
What do the prompt cards do?
Each card is one of her profile prompts. Pressing it puts "Replying to your prompt" and its title into the field and moves focus there, so you finish the sentence yourself; nothing is sent until you press Send. Once a message that starts that way is sent, the card shows "Used" and turns quiet, and the row scrolls sideways on a narrow screen.
How do report and block work here?
Both are in the Safety popover, which says you can use them at any time and they are not told. Report marks the chat as reported and adds a line saying the report is an example only. Block turns into Unblock, adds a line, and while it is on Send answers "Unblock Maren Holloway to write" instead of posting. Keep real reports out of a demo and send them to your own review queue.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden "Maren Holloway, 18:02" or "You, 18:05". Both popovers open from labelled buttons and close with Escape. Delivery is a glyph and a word, never a color, and one status line under the composer reports what happened after each action.