Orvain UI

Rating blocks

Ratings cover two jobs that share a name and very little else: a picker that collects one person's score, and a summary that reports the average a population has already left.

Get Pro to installPro12 blocksReact, Vue and Figma
MCPConnect the MCP server
Ticket #4821 · Closed today

How was your support chat?

0 / 500
A note is optional

Every block in the set#

Bar with a note

Post-purchase surveys, ticket close-out, anywhere the score needs a reason

Bar with a note, slide

A rating that should also say why, with one-tap reasons

Bar with a note, composer

Chat and ticket close-outs where the rating and the note are one step

Score stacked

Product page headers, App Store-style blocks

Score stacked, breakdown

Products where an average hides a lot of one-star ratings

Score stacked, recent

Scores that change, where the period matters

Score inline

Review section headers, comparison rows

Score inline, peek

Headers where the detail should be one step away

Score inline, compare

Comparison tables of products or plans

Heart score

Saved and favourited counts, where the summary should not read as a star review

Heart score, love it

Listings and saved items people can join

Heart score, fill

Guest-love summaries with a period switch

When to use#

  • Closing a support ticket, where the score needs a reason beside it
  • A product page header that has to carry the average and the number behind it
  • A one-off survey after a purchase, where a short scale is all you can fairly ask for
  • A saved or favourited count that should read as affection rather than as a review

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans