Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Support Chat Customer Award Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A service award with the chat behind it for React with Base UI. 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.

What happens on a phone?

The header, the award and the chat stack in that order, and the award card puts the seal above its text.

Is this a real conversation or award?

No. The programme, the award, the product and the chat are all made up for the example, with fixed times and a fixed year.

  • Pro

    Customer Choice Seal Awards

    Badges and seals

    A split with a drawn satisfaction seal showing the score as text, beside a headline and a cloud of praise topics as outline badges whose size and border step with each topic's share of the most praised.

  • Pro

    Featured Plaque Awards

    One featured award

    One grand award for a payments platform: a large framed plaque with a laurel wreath and the year on a ribbon beside the heading, a description list of the facts and one sentence from the jury.

  • Pro

    Judges Quotes Testimonials Awards

    Press and quotes

    Three judges' quotations for a meeting app, each tied to the award it is about: the award's drawn mark, the award and programme, the quotation, and the judge's name and role, in cells with overshoot lines.

  • Pro

    Details Awards

    Cards and grids

    Three award data sheets for a monitoring tool: a drawn mark and the award's name over a description list of result, programme, category, entries judged, announcement date and prize.

  • Pro

    Spotlight Dialog Awards

    Reveal and browse

    A 3 by 2 grid of award tiles that each open one centred dialog with the full details, a counter and Previous and Next, with arrow keys cycling.

  • Pro

    Benchmark Table Technology Awards

    Lists and tables

    Benchmarks as awards for an API gateway: a table with a row for each test, the award and year, two bars against the next best result, the measured figure and a derived lead such as 2.3x faster.

All 137 awards blocks