shadcn.io is not affiliated with official shadcn/ui
Support Chat Customer Award Block for React Aria
A customer service award card with a drawn rosette seal, a read-only rating and a resolution time beside the drawn support chat that earned it.
Installation
Overview
A service award with the chat behind it for React with React Aria. A split behind a solid divider. At the start a title, a sentence and the award card, a frame with its lines reaching past the corners: a drawn rosette seal (sixteen scalloped lobes and a star), the award's name, its programme and year, a read-only five-star rating with "5 out of 5" in text, and "Resolved in 6 minutes", worked out from the first and last message times in the chat. At the end a drawn support chat in a window: an ordered list of four messages in greyscale bubbles, the customer's in muted cells and the agent's solid. On a phone the chat sits under the award. The award, the programme and the conversation are made up for the example: replace AWARD and MESSAGES with your own.
FAQ
How do I change the chat or the award?
Edit MESSAGES (each has a sender, the minute of the day it was sent and its text) and AWARD. The "resolved in" time is the gap between the first and the last message, so it always agrees with the chat.
Is the rating interactive?
No. The stars only draw the score and are hidden from assistive technology and the keyboard; the score is in text beside them ("5 out of 5").
How is the chat read by a screen reader?
As an ordered list named "Support chat" where each message reads its sender and time before its text. The window frame and the seal are drawings.
Why are the bubbles not coloured?
The block follows your theme in foreground tones only: the customer's messages are muted cells and the agent's are solid foreground, so the two read by weight and by the sender's name.